HTML表格需要列之间的间距，而不是行答案

【问题标题】：HTML table needs spacing between columns, not rowsHTML表格需要列之间的间距，而不是行
【发布时间】：2012-08-01 19:29:40
【问题描述】：

我有一个 HTML 表格。我需要在表格列之间有间距，但不是表格行。

如果我使用cellspacing CSS 属性，它会在行和列之间执行。我也不能在我所做的事情中使用 CSS。我需要使用纯 HTML。

【问题讨论】：

这是否遗漏了内联样式？
添加一个包含不间断空格 ( ) 的额外 td？

标签： html

【解决方案1】：

如果您可以使用内联样式，则可以在每个 td.. 上设置左右填充。或者您可以在列之间使用额外的 td，并按照@rene 的建议设置多个不间断空格。

http://jsfiddle.net/u5mN4/

http://jsfiddle.net/u5mN4/1/

两者都很丑;p css ftw

【讨论】：

我推荐内联 css，空白的<td> 对使用辅助技术的人来说会很烦

【解决方案2】：

<table cellpadding="pixels"cellspacing="pixels"></table>
<td align="position"valign="position"></td>

cellpadding="length in pixels" ~<table> 标签中使用的 cellpadding 属性指定在每个表格单元格的内容与其各自的边框之间显示多少空白空间。该值定义为以像素为单位的长度。因此，cellpadding="10" 属性值对将在该表中每个单元格内容的所有四个边上显示 10 个像素的空白区域。

cellspacing="length in pixel" ~ cellspacing 属性，也用于<table> 标签，定义在相邻表格单元格之间以及表格单元格和表格边框之间显示多少空白空间。该值定义为以像素为单位的长度。因此，cellspacing="10" 属性值对将水平和垂直分隔相应表格中的所有相邻单元格，长度为 10 个像素。它还将所有单元格从表格框架的所有四个边偏移 10 个像素的长度。

【讨论】：

注意：在 TABLE 标签上使用内联 CSS 似乎也有效。在右边距提供 20 像素的填充。

【解决方案3】：

更好的方法是使用 Shredder 的 css 规则：padding: 0 15px 0 15px 只定义一个适用于所有 tds 的 CSS 规则，而不是内联 css。通过在页面中使用样式标签来做到这一点：

<style type="text/css">
  td {
    padding: 0 15px;
  }
</style>

或者给表格一个类似“paddingBetweenCols”的类并在站点css中使用

.paddingBetweenCols td {
  padding: 0 15px;
}

站点 css 方法定义了一个可以被所有页面重用的中心规则。

如果您使用站点 css 方法，最好定义一个类似上面的类并将填充应用于该类...除非您希望整个站点上的所有 td 都应用相同的规则。

Fiddle for using style tag

Fiddle for using site css

【讨论】：

【解决方案4】：

在大多数情况下，最好仅在右侧填充列，以便仅填充列之间的间距，并且第一列仍与表格对齐。

CSS：

.padding-table-columns td
{
    padding:0 5px 0 0; /* Only right padding*/
}

HTML：

<table className="padding-table-columns">
  <tr>
    <td>Cell one</td>
     <!-- There will be a 5px space here-->
    <td>Cell two</td>
     <!-- There will be an invisible 5px space here-->
  </tr>
</table>

【讨论】：

【解决方案5】：

这可以通过使用 CSS 在列之间放置填充来实现。您可以在除第一列之外的所有列的左侧添加填充，也可以在除最后一列之外的所有列的右侧添加填充。您应该避免在最后一列的右侧或第一列的左侧添加填充，因为这会插入多余的空白。您还应该避免对类过于规范，以指定哪些列应该有额外的填充，因为如果您以后添加新列，这将使维护变得更加困难。

“lobotomised owl selector”允许您选择所有兄弟姐妹，无论它们是 th、td 还是其他。

tr > * + * {
  padding-left: 4em;
}

<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
  </tbody>
</table>

【讨论】：