仅删除单个表格单元格之间的间距

Question

我想知道是否可以删除网页上的表格单元格之间的空格仅一行.我已经看到很多示例显示如何为整个表执行此操作,但我有一个表,其标题看起来更好,其单元格之间没有间距.这是我的意思的一个例子:

<table>
  <tr>
    <!-- I'd like these cells to NOT have any space between them -->
    <td>ColHeader1</td>
    <td>ColHeader2</td>
    <td>ColHeader3</td>
  </tr>
  <tr>
    <!-- I'd like these cells to have normal spacing -->
    <td>NormalCol1</td>
    <td>NormalCol2</td>
    <td>NormalCol3</td>
  </tr>
</table>

我已经尝试在行和单元格中将填充设置为0,但这对我没有任何作用.该border-collapse属性只能应用于表元素,同样适用border-spacing.

Answer 1

请尝试以更好的方式使用表格.所以,如果你的表中有标题,请按以下方式进行:

<table>
  <thead>
    <tr>
      <th>header 1</th>
      <th>header 2</th>
       ...
    </tr>
  </thead>
  <tbody>
    (table content goes here>
  </tbody>
</table>

现在,您可以轻松地为标题和表格主体分隔样式.

<thead>是专门为表头部分制作的,因为它们被广泛使用.如果您的表格中有页脚,您也可以使用该<tfoot>标记(但请记住,必须在<tbody>标记之前显示).

希望这是你正在寻找的.

编辑: 另一种可能性是创建两个表,一个用于标题,一个用于内容.您还可以使用div元素创建标题并以表格方式设置样式.正如评论中指出的那样,不可能应用不同的值cellspacing或cellpadding.

<table cellspacing="0">
  (headers)
</table>
<br />
<table cellspacing="2">
  (content)
</table>

另一种选择是从div元素创建整个表,但对于表格内容,最好使用table.