如何在表格单元格上添加边框，而不是在 html 上添加整个表格？

【问题标题】：How to add border on table cells, but not the whole table on html?如何在表格单元格上添加边框，而不是在 html 上添加整个表格？
【发布时间】：2016-10-11 16:09:22
【问题描述】：

我正在尝试在表格单元格上添加边框，但我不知道如何使用 rowspan。

我想要一个有 4 个单元格的表格左边 1 个大单元格，右边 3 个小单元格。

这是我使用的代码

jsfiddle[dot]net/1fv4dz5g/3/

【问题讨论】：

你不能为每个 td 添加一个边框，像这样：jsfiddle.net/1fv4dz5g/5?

标签： html css html-table

【解决方案1】：

这可以使用 CSS 来完成。检查这个 CSS 示例

td {
  border: 1px solid black;
}

<table class="tnews-side" border="0">

<tr>
<td rowspan="3">
<table border="1" cellpadding="4" cellspacing ="0">Row 1 Cell 1</table>
</td>
  <td>Row 1 Cell 2</td>
</tr>
<tr>
  <td>Row 2 Cell 2</td>
</tr>
<tr>
  <td>Row 2 Cell 2</td>
</tr>
</table>

【讨论】：

【解决方案2】：

使用 CSS 有两种方法：

设置每个/所有td一个类并使用css边框：

<style>
.bigCell{border:1px solid black;}
.smallCell{border-left:1px solid black;}
</style>
...
<td class="biCell">
...
<td class="smallCell">

或者您可以使用嵌套选择或:nth-child() 选择器

<style>
table tr:nth-child(2) td
{
  border:...
}

</style>

您可以检查： https://css-tricks.com/almanac/selectors/n/nth-child/

【讨论】：