表边框html

Question

我正在创建一堆表格，当我添加表格标题(<th>)表格行<tr>并为其添加边框时，会出现多个边框。我的意思是说我连续有两个表头，所以每个标签都会添加自己的边框，但我只想要两个表头之间的边界（th）。

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

如果您参考上面的代码，如果我添加边框来说明标签，则header1和header2之间将有2个边框。我只想要1.

Answer 1

你的问题描述含糊不清（将来请提出一个SSCCE，这样每个人都可以将'n'paste'n'run一起复制到看你是什么的确切地说，但至少，这个“双边界”问题的一个常见解决方案是将border-collapse: collapse属性添加到相关的父表中：

table {
    border-collapse: collapse;
}

有关几个示例，请参阅this Quirksmode article。

Answer 2

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

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

Answer 3

如果你保证有2列，只有2列，如果我正在读你的问题，你只想要两者之间的边界（即在第二个标签的中间），那么只需应用一个边界 - 右边的左边：

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列就可以了。再次假设你的问题是你想要两个单元格之间的边界，而不是其他地方。