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

Question

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

如果我使用cellspacingCSS属性,它会在行和列之间进行.我也不能在我做的事情中使用CSS.我需要使用纯HTML.

Answer 1

更好的方法是使用Shredder的css规则:padding:0 15px 0 15px而不是内联css,定义适用于所有tds的css规则.通过在页面中使用样式标记来执行此操作:

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

或者给表一个像"paddingBetweenCols"这样的类并在网站css中使用

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

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

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

小提琴使用样式标签

使用网站css的小提琴

请注意你

Answer 2

如果你可以使用内联样式,你可以在每个上面设置左右填充td..或者你td在列之间使用额外的内容并设置一些非破坏空格,正如@rene建议的那样.

http://jsfiddle.net/u5mN4/

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

两者都很难看; p css ftw

Answer 3

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

cellpadding="以像素为单位的长度"〜<table>标签中使用的cellpadding属性指定在每个表格单元格的内容与其相应边框之间显示多少空白空间.该值定义为以像素为单位的长度.因此,cellpadding="10"属性 - 值对将在该表中的每个单元格的内容的所有四个边上显示10个像素的空白空间.

cellspacing="以像素为单位的长度"〜在<table>标签中也使用的cellspacing属性定义了在相邻表格单元格之间以及表格单元格与表格边框之间显示的空白空间量.该值定义为以像素为单位的长度.因此,cellspacing="10"属性 - 值对将水平和垂直地将相应表中的所有相邻单元分开10个像素的长度.它还会将所有四边的桌面框架中的所有单元格偏移10个像素的长度.

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

Answer 5

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

“脑白质切除猫头鹰选择器”允许您选择所有兄弟姐妹，无论它们是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>