表格边框html

Question

我现在正在创建一堆表，当我添加表头(<th>)、表行<tr>和添加边框时，会出现多个边框。我的意思是说，我在一行中有两个表头，所以每个th标签都会添加自己的边框，但我只想要两个表头的(th)之间的边框。

<table>
    <th>Header1</th>
    <th>Header2</th>
    <tr><td>Data1</td><td>Data2</td> </tr>
</table> 

如果你参考上面的代码，如果我添加边框来表示这个标签，那么在header1和header2之间会有2个边框。我只想要一个。

Answer 1

你的问题描述是模糊的(将来，请想出一个SSCCE，这样每个人都可以复制‘n’粘贴‘n’运行它，看看你到底是什么意思)，但至少，这个“双重边界”问题的一个常见解决方案是向有问题的父表添加border-collapse: collapse属性：

table {
    border-collapse: collapse;
}

另请参阅this Quirksmode article中的几个示例。

Answer 2

在CSS中为table和th设置border-collapse:collapse：

table, th, td { border-collapse:collapse }

Answer 3

如果你保证有第2列并且只有第2列，如果我读对了你的问题，你只需要在这两列之间有一个边框(即在两个th标签的中间)，那么只需在th的左边应用一个边框：

table
{
   border-collapse: collapse;
}
th.leftColumn
{
   border-right:1px solid #000;
}

标记

<table>
   <tr>
      <th class="leftColumn">&nbsp;</th>
      <th>&nbsp;</th>
   </tr>
   <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
   </tr>
</table>

它又快又脏，但是如果你知道你只有2列，它就可以工作了。同样，这是假设你的问题是你想要两个th单元之间的边界，而不是其他任何地方。