Question

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

Answer 1

不，HTML属性cellspacing及其CSS对应border-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 */
}

我希望这能说明一切。这将使您更好地控制单元格中的填充。使用margin来处理单元格之间的间距。如果将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;}

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

你应该通过测试你的方式，如果你想要填充或边缘我不能从你的问题中找出一个，我对这两个表的结果有点不确定。

仅在单个列中更改CellSpacing

5 个答案: