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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11800975/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 02:03:36  来源:igfitidea点击:

HTML table needs spacing between columns, not rows

html

提问by Nate Pet

I have an HTML table. I need to have spacing between the table columns, but not the table rows.

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

If I use the cellspacingCSS property it does it between both rows and columns. I also cannot use CSS in what I doing. I need to use pure HTML.

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

采纳答案by Nick Rolando

If you can use inline styling, you can set the left and right padding on each td.. Or you use an extra tdbetween columns and set a number of non-breaking spaces as @rene kindly suggested.

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

http://jsfiddle.net/u5mN4/

http://jsfiddle.net/u5mN4/

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

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

Both are pretty ugly ;p css ftw

两者都很丑陋;p css ftw

回答by user2258403

The better approach uses Shredder's css rule: padding: 0 15px 0 15px only instead of inline css, define a css rule that applies to all tds. Do This by using a style tag in your page:

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

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

or give the table a class like "paddingBetweenCols" and in the site css use

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

.paddingBetweenCols td
{
    padding:0 15px;
}

The site css approach defines a central rule that can be reused by all pages.

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

If your doing to use the site css approach, it would be best to define a class like above and apply the padding to the class...unless you want all td's on the entire site to have the same rule applied.

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

Fiddle for using style tag

使用样式标签的小提琴

Fiddle for using site css

使用站点 css 的小提琴

回答by GavinBelson

In most cases it could be better to pad the columns only on the right so just the spacing between the columns gets padded, and the first column is still aligned with the table.

在大多数情况下,最好只在右侧填充列,这样只会填充列之间的间距,并且第一列仍然与表格对齐。

CSS:

CSS:

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

HTML:

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>

回答by divya

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

cellpadding="length in pixels" ~ The cellpadding attribute, used in the <table>tag, specifies how much blank space to display in between the content of each table cell and its respective border. The value is defined as a length in pixels. Hence, a cellpadding="10"attribute-value pair will display 10 pixels of blank space on all four sides of the content of each cell in that table.

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

cellspacing="length in pixels" ~ The cellspacing attribute, also used in the <table>tag, defines how much blank space to display in between adjacent table cells and in between table cells and the table border. The value is defined as a length in pixels. Hence, a cellspacing="10"attribute-value pair will horizontally and vertically separate all adjacent cells in the respective table by a length of 10 pixels. It will also offset all cells from the table's frame on all four sides by a length of 10 pixels.

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