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属性只能应用于table元素，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。

Answer 2

你可以在第一个表行使用<th>（表头）而不是<td> s，并用css作为目标。除此之外，还有一个css第一个孩子选择器（与所有浏览器不兼容）

table tr:first-child td{
   /* css code for no spacing here */
}

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

2 个答案: