使用 css 在 html 表格行之间添加一些空间的好方法?适用于所有浏览器,包括 IE6

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6048809/
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 08:40:05  来源:igfitidea点击:

Good way to add some space between html table rows using css? Works across all browsers including IE6

htmlcss

提问by Tony_Henrich

What's a good way to add some space between html table rows using css? Should work in all browsers including IE6. Should use id or class so it doesn't affect every table in the site. Prefer to declare the css at the table level. Don't want to use empty tr's to simulate a blank row. css should not affect any inner tables.

使用 css 在 html 表格行之间添加一些空间的好方法是什么?应该适用于所有浏览器,包括 IE6。应该使用 id 或 class,这样它就不会影响站点中的每个表。更喜欢在表级别声明 css。不想使用空 tr 来模拟空白行。css 不应影响任何内部表。

Logically I tried this but margins don't work with tr's:

从逻辑上讲,我尝试过此操作,但边距不适用于 tr:

.someclass tr
{
  margin-bottom:20px;
}

回答by Brian Fisher

You could use:

你可以使用:

.someclass td {padding-bottom: 20px;} 

It's unfortunately not that intuitive but it works on IE6 and all the other browsers. You can also do it with a border:

不幸的是,它不是那么直观,但它适用于 IE6 和所有其他浏览器。你也可以用边框来做:

.someclass td {border-bottom: 20px solid white;}

Edit

编辑

To exclude an inner table you could use:

要排除内部表,您可以使用:

.someclass td td {padding-bottom: 0px;}

回答by quasistoic

border-spacingis the right way to go, but doesn't fulfill all your requirements.

border-spacing是正确的方法,但不能满足您的所有要求

Still, you could use it in combination with a little browser-detection: if IE < 8, use a little javascript to add some cellspacing.

不过,您可以将它与一些浏览器检测结合使用:如果 IE < 8,请使用一些 javascript 来添加一些单元格间距。

回答by Sandeep Choudhary

Add following rule to tr and it should work

将以下规则添加到 tr 中,它应该可以工作

float: left

Sample (Open it in IE9 offcourse :) ): http://jsfiddle.net/zshmN/

示例(在 IE9 offcourse 中打开它:)):http: //jsfiddle.net/zshmN/

回答by anand24

<tr><td><br></td></tr>

The above creates a gap between 2 rows with the <br>tag

以上创建了带有<br>标记的2 行之间的间隙

回答by Jason Gennaro

If you don't want the border to be too big/thick (with border-spacing), you could use paddingon the td.

如果您不希望边框太大/太厚(带有border-spacing),则可以paddingtd.

http://jsfiddle.net/zzJ9Z/

http://jsfiddle.net/zzJ9Z/