不规则的表与表头的边框

Question

我有某种类似的表格，我想做的就是沿着表格标题放置边框，在屏幕上用红色标记。

表格形状用黑色标记，我不希望这个黑色边框可见。 我忘了在这张照片上表示一些td也沿着这条线分成两半。

我希望有一种更好的方法，而不是为每个我需要的td设置边界。

Answer 1

如果你给你的桌子上课..

<table class='my-table'>

然后你可以使用css

来定位该类中的所有td

.my-table td {
   border-left:1px solid red;
   border-right: 1px solid red;
}
.my-table {
   border-bottom: solid 1px red;
}

对于沿着该行分成两半的td，可能更容易关闭那些边界（可能通过内联样式），而不是为所有其他td打开它们。也就是说，如果我理解你要做的事情。希望这会有所帮助。

Answer 2

您想要使用的是边框折叠和左右边框的组合：

<table>
<thead>
  <tr>
    <th>Header One</th>
    <th>Header Two</th>
    <th>Header Three</th>
    <th>Header Four</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Sanctus sea sed takimata</td>
    <td rowspan="4">Sanctus sea sed takimata</td>
    <td rowspan="2">Sanctus sea sed takimata</td>
    <td>Sanctus sea sed takimata</td>
  </tr>
  <tr>
    <td>Sanctus sea sed takimata</td>
    <td rowspan="3">Sanctus sea sed takimata</td>
  </tr>
  <tr>
    <td>Sanctus sea sed takimata</td>
    <td>Sanctus sea sed takimata</td>
  </tr>
  <tr>
    <td>Sanctus sea sed takimata</td>
    <td rowspan="2">Sanctus sea sed takimata</td>
  </tr>
  <tr>
    <td>Sanctus sea sed takimata</td>
    <td rowspan="2">Sanctus sea sed takimata</td>
    <td rowspan="4">Sanctus sea sed takimata</td>
  </tr>
  <tr>
    <td>Sanctus sea sed takimata</td>
    <td rowspan="3">Sanctus sea sed takimata</td>
  </tr>
  <tr>
    <td>Sanctus sea sed takimata</td>
    <td rowspan="2">Sanctus sea sed takimata</td>
  </tr>
  <tr>
    <td>Sanctus sea sed takimata</td>
  </tr>
</tbody>
</table>

使用css：

table {
    border-collapse: collapse;
}

table thead tr {
    border: 1px solid black;
}

table tbody {
    border-bottom: 1px solid blue;
}

table tbody tr td {
    border-left: 1px solid blue;
    border-right: 1px solid blue;
}

检查出来：http://jsfiddle.net/PYWHA/