使用css在表格中设置内部边框

Question

阅读this Stack Overflow question - 其中（不要误会我的意思）有效。但我似乎找不到根据我的要求编辑它的方法。

目前，JSFiddle给出了：

 Heading | Heading
---------+---------
 Row     | Row
---------+---------
 Row     | Row
---------+---------
 Row     | Row

如何将其编辑为：

 Heading | Heading
---------+---------
 Row     | Row
 Row     | Row
 Row     | Row

相反？

我尝试了很多组合，但似乎永远无法让它发挥作用！ ：（

---

我也注意到接受的答案是+5岁。 它仍然是“更好”/“最佳”解决方案吗？

---

顺便说一下，我对css并不擅长（实际上，我太可怕了），所以非常感谢你的帮助（毕竟，我最终完成了this - 错了！）。

Answer 1

移除您的table tr:last-child td群组（因为它将是多余的）并添加样式以从<td>移除任何顶部或底部边框。

table {
    border-collapse: collapse;
}
table td, table th {
    border: 1px solid black;
}
table tr:first-child th {
    border-top: 0;
}

/* ---- This change --------- */
table tr td {
    border-bottom: 0;
    border-top:0;
}
/* ------------- */

table tr td:first-child,
table tr th:first-child {
    border-left: 0;
}
table tr td:last-child,
table tr th:last-child {
    border-right: 0;
}

<table>
    <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
    </tr>
    <tr>
        <td>Cell (1,1)</td>
        <td>Cell (1,2)</td>
    </tr>
    <tr>
        <td>Cell (2,1)</td>
        <td>Cell (2,2)</td>
    </tr>
    <tr>
        <td>Cell (3,1)</td>
        <td>Cell (3,2)</td>
    </tr>
</table>

Answer 2

检查这个小提琴：fiddle

<table>
    <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
    </tr>
    <tr>
        <td class="inner">Cell (1,1)</td>
        <td class="inner">Cell (1,2)</td>
    </tr>
    <tr>
        <td class="inner">Cell (2,1)</td>
        <td class="inner">Cell (2,2)</td>
    </tr>
    <tr>
        <td class="inner">Cell (3,1)</td>
        <td class="inner">Cell (3,2)</td>
    </tr>
</table>

table {
    border-collapse: collapse;
}
table td, table th {
    border: 1px solid black;
}
table tr:first-child th {
    border-top: 0;
}
table tr:last-child td {
    border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
    border-left: 0;
}
table tr td:last-child,
table tr th:last-child {
    border-right: 0;
}

.inner {
    border-bottom:1px white solid;
}

Answer 3

只需在你的css中执行此操作，这样就会为你的c添加底部边框。

table tr th{
    border:0px solid transparent;
    border-bottom-width:1px;
    border-bottom-color:black;
}