如何在HTML中给表格单元格添加边框，而不是整个表格？

Question

我想在表格单元格上添加边框，但我无法弄清如何在 rowspan 中完成。

我希望创建一个表格，其中有4个单元格，在左侧有1个大单元格，在大单元格的右侧有3个小单元格。

下面是我使用的代码：

jsfiddle[点]net/1fv4dz5g/3/

- Foxseiz

---

你不能只是为每个td添加一个边框，就像这样：http://jsfiddle.net/1fv4dz5g/5/? - Hui Liu

Answer 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>

- Cristian Penarrieta

Answer 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/

- bakz