77

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

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

4

5 回答 5

58

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

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

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

.paddingBetweenCols td {
  padding: 0 15px;
}

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

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

使用样式标签的小提琴

使用网站 css 的小提琴

于 2015-03-24T19:22:29.693 回答
41

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

http://jsfiddle.net/u5mN4/

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

两者都很丑；p css ftw

于 2012-08-03T18:12:09.433 回答
12 
<table cellpadding="pixels"cellspacing="pixels"></table>
<td align="position"valign="position"></td>

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

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

于 2013-07-09T10:00:20.507 回答
9

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

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>
于 2019-01-18T17:24:05.697 回答
3

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

' lobotomised owl selectorth ' 允许您选择所有兄弟姐妹，无论它们是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>

于 2020-09-30T17:15:52.780 回答