Question

这是我的表

<table  border ="1" width="1253" style="margin-left:30px;">
      <tr>
        <td width="40" height="40"></td>
        <td width="5" height="40"></td>
        <td width="30" height="40"></td>
      </tr>
      <tr>
        <td width="40" height="40"></td>
        <td width="5" height="40"></td>
        <td width="30" height="40"></td>
      </tr>
      <tr>
        <td width="40" height="40"></td>
        <td width="5" height="40"></td>
        <td width="30" eight="40"></td>
      </tr>
      <tr>
        <td width="40" height="40"></td>
        <td width="5" height="40"></td>
        <td width="30" height="40"></td>
      </tr>
      <tr>
        <td width="40" height="40"></td>
        <td width="5" height="40"></td>
        <td width="30" height="40"></td>
      </tr>
    </table>

这是我的css

 table {
    border-collapse: collapse;
    border-style: hidden;
}

table td, table th {
    border: 1px solid #0082C1;
}

通过这样做，我可以显示没有任何外边框的表，但我想让它看起来像两个表，这意味着每行的中间列不应该显示。请帮助我。我试过通过获取属性显示在一行中取两个表：inline-block，但它没有正常工作，因为它也显示了外边框。

Answer 1

尝试添加以下样式：

table td:nth-child(2), table th:nth-child(2) {
    border: none;
}

但请注意nth-child支持率有限。它不适用于IE8及更早版本。

Answer 2

fiddle

尝试：

//remove borders on second column

    table tr td:nth-child(2) 
    { 
    border:none; 
    }

//remove left and right borders

table td, table th {
    border-top: 1px solid #0082C1;
    border-left:none;
    border-right:none;
}

如何设置表格每行的特定列的样式，以便不显示其边框

2 个答案: