使用CSS设置表格样式时的额外空间

时间:2014-04-05 15:52:42

标签: html css

作为重新设计网站的一部分,我正在尝试使用css设置表格。

<table width="100%" cellpadding="0" cellspacing="0" border="0">

我最终得到了这个:

<table class="table1">

.table1 {
width: 100%;  
border: none;
border-spacing: 0;
border-collapse: colapse;
padding : 0;
}

奇怪的问题:将css样式应用于表时,结果略有不同。细胞之间的空间略大。

请参阅jsfiddles:

表格不是带css的样式:http://jsfiddle.net/32534/1/ 表格用css设置:http://jsfiddle.net/47AUR/1/

为什么文本输入之间有额外的空间?我究竟做错了什么?!谢谢!

修改:使用谷歌浏览器。

4 个答案:

答案 0 :(得分:2)

cellpadding也会影响td填充,所以只需添加:

.table1 td{
    padding: 0;
}

答案 1 :(得分:0)

默认情况下,chrome会添加默认样式:

`border-spacing: 2px;` on the table.

http://jsfiddle.net/32534/1/中,您没有提到任何表格样式。因此它正在采用默认的chrome风格。

但是在下一个小提琴链接:http://jsfiddle.net/47AUR/1/你已经特别提到了表的样式,它覆盖了默认的chrome样式。

最好使用 reset.css 在所有浏览器中保持一致,并忽略所有浏览器的默认样式

答案 2 :(得分:0)

只需添加

td { 

padding: 0px;

}

答案 3 :(得分:0)

它适用于padding:0上的td,因为cellpadding影响)元素,第二个 l colapse

演示http://jsfiddle.net/at4yL/