CSS：如何消除表中特定行/列的边框

Question

我有下表：

我正在寻找从“Row1 - Column1”单元格中删除边框的方法，所以它看起来如下所示：

这是我的HTML：

<table id="tblContent" style="width:1000px;">
   <tr>
     <td colspan="5">Row 1 - Column1</td>
     <td colspan="4">Row1 - Column1=2</td>
   </tr>
   <tr>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
   </tr>

这是我的css：

#tblContent
{
    border:1px solid black;
    border-collapse:collapse;
    margin-top:20px;
}

#tblContent td
{
    border:1px solid black;
    text-align:center;
    font-size:small;
} 

我该怎么做？有什么想法吗？

Answer 1

如果要从中删除边框的元素始终是第一行中的第一个单元格。您可以使用first-child选择器设置以此为目标的css规则。

或者，您也可以为该单元格提供一个类并将规则作为目标。

使用first-child：

#tblContent
{
    border-collapse:collapse;
    margin-top:20px;
}

#tblContent td
{
    border:1px solid black;
    text-align:center;
    font-size:small;
}

#tblContent tr:first-child td:first-child {
  border:none;
}

<table id="tblContent" style="width:1000px;">
   <tr>
     <td colspan="5">Row 1 - Column1</td>
     <td colspan="4">Row1 - Column1=2</td>
   </tr>
   <tr>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
   </tr>
</table>

使用课程：

#tblContent
{
    border-collapse:collapse;
    margin-top:20px;
}

#tblContent td
{
    border:1px solid black;
    text-align:center;
    font-size:small;
}

#tblContent .noBorder {
  border:none;
}

<table id="tblContent" style="width:1000px;">
   <tr>
     <td colspan="5" class="noBorder" >Row 1 - Column1</td>
     <td colspan="4">Row1 - Column1=2</td>
   </tr>
   <tr>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
   </tr>
</table>

Answer 2

就是这样，只是fint第一个表行和该行的第一个表列。

#tblContent
{
    border-collapse:collapse;
    margin-top:20px;
}

#tblContent td
{
    border:1px solid black;
    text-align:center;
    font-size:small;
    height: 20px;
} 
#tblContent tr:first-child td:first-child{
    border-top: none;
    border-left: none;
  }

<table id="tblContent" style="width:1000px;">
   <tr>
     <td colspan="5">Row 1 - Column1</td>
     <td colspan="4">Row1 - Column1=2</td>
   </tr>
   <tr>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
   </tr>
  </table>

Answer 3

尝试类似

的内容

#tblContent tr:first-child > td:first-child {
  border-top-color: transparent;
  border-left-color: transparent;
}

#tblContent {
  border: 1px solid black;
  border-collapse: collapse;
  margin-top: 20px;
}
#tblContent td {
  border: 1px solid black;
  text-align: center;
  font-size: small;
}
#tblContent tr:first-child > td:first-child {
  border-top-color: transparent;
  border-left-color: transparent;
}

<table id="tblContent" style="width:1000px;">
  <tr>
    <td colspan="5">Row 1 - Column1</td>
    <td colspan="4">Row1 - Column1=2</td>
  </tr>
  <tr>
    <td>Foo</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Answer 4

试试这个https://jsfiddle.net/acn7k7e6/

<强> CSS

#tblContent
{
    border-collapse:collapse;
    margin-top:20px;
}

#tblContent td
{
    border:1px solid black;
    text-align:center;
    font-size:small;
} 

#tblContent td:first-child {
    border: medium none;
}

Answer 5

我想try表将为for或while构建一个循环，所以尝试为id和html中的id分配id或使用data-row和data-col以这种方式你将知道什么列在什么你要删除或修改你想要的任何行。