html - 不规则表格与表格标题的边框

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/