Question

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

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

Answer 1

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

http://jsfiddle.net/u5mN4/

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

两者都很难看; p css ftw

Answer 2

更好的方法是使用Shredder的css规则：填充：0 15px 0 15px 仅代替内联css，定义适用于所有tds的css规则。通过在页面中使用样式标记来执行此操作：

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

或者为表格提供类似＆＃34; paddingBetweenCols＆＃34;并在网站css中使用

.paddingBetweenCols td
{
    padding:0 15px 0 15px;
}

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

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

Fiddle for using style tag

Fiddle for using site css

请注意

Answer 3

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

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

cellspacing =＆＃34;像素长度＆＃34; ~cempherepacing属性（也在<table>标记中使用）定义了在相邻表格单元格之间以及表格单元格与表格边框之间显示的空白空间量。该值定义为以像素为单位的长度。因此，cellspacing="10"属性 - 值对将水平和垂直地将相应表中的所有相邻单元分开10个像素的长度。它还将所有四个边上的表格框架中的所有单元格偏移10个像素的长度。

Answer 4

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

CSS：

ListBox

HTML：

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

Answer 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>

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

5 个答案: