使用 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
Good way to add some space between html table rows using css? Works across all browsers including IE6
提问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 padding
on the td
.
如果您不希望边框太大/太厚(带有border-spacing
),则可以padding
在td
.