html - 仅在单列中更改单元格间距

Question

有没有办法只改变单列中的单元格间距？可能在html或css中？

Answer 1

不，HTML 属性cellspacing及其对应的 CSSborder-spacing仅适用于整个表格。当不使用边框并且背景不是问题时，您可以使用填充来实现相同的效果。但是关于表格单元格边界之间的间距，表格内不可避免地是统一的。

使用假细胞可能是一种解决方法。不要在单元格上设置边框，而是在单元格内的容器上设置它们。然后单元格上的任何填充将看起来像单元格边界之间的间距。

Answer 2

对此的良好约定是：

HTML：

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="large-padding">Row 1, Col 1</td>
    <td>Row 1, Col 2</td>
    <td>Row 1, Col 3</td>
  </tr>
  <tr>
    <td class="large-padding">Row 2, Col 1</td>
    <td>Row 2, Col 2</td>
    <td>Row 2, Col 3</td>
  </tr>
  <tr>
    <td class="large-padding">Row 3, Col 1</td>
    <td>Row 3, Col 2</td>
    <td>Row 3, Col 3</td>
  </tr>
</table>

CSS：

/* Used for all table cells */
td {
  padding: 10px;
}

/* Used for all table cells with the class large-padding, used on the first cell of every row (the first column */
.large-padding {
  padding: 10px 20px; /* 10px for top and bottom to keep inline with the other cells, 20px for left and right */
}

我希望这很好地说明了这一点。这将使您更好地控制单元格中的填充。使用边距在单元格之间做间距。如果将 css 类应用于每一行的第一个 td，那将是表的第一列。

Answer 3

我发现使用以下内容：

CSS：

.flag {padding-left:8px;}

表格内的 HTML：

<td class="flag">

帮助我解决了只有一列之间的间距问题。

Answer 4

如果您有一个包含 2 列的表，并且您希望其中一列的宽度为 100% 而不是 50%，则使用 td 标记上的 colspan 属性。（我从 w3schools 复制了一张快速表，别生气）

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$100</td>
  </tr>
  <tr>
    <td colspan="2">Sum: $180</td>
  </tr>
</table>

Answer 5

如果您将一些 css 应用于您想要更宽的列，它应该很容易解决。

<table>
    <tr>
        <td></td>
        <td id="extra_width"></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

在 css 中，您只需在该列上应用所需的样式：

#extra_width {padding-left: 10px; padding-right: 10px;}

当您将宽度应用于第一行中间的表格单元格时，实际上我认为它适用于任何行，同一列中的单元格可能会继承，或者至少获得与该单元格相同的宽度。

你当然应该测试你的方式，如果你想要填充或边距，我无法从你的问题中找出那个，而且我有点不确定表格中两者的结果。