css格子样式,CSS表格样式

如何通过CSS样式设置单元格显示内容的长度

在table

中控制单元格之间的间距要用到cellspacing、cellpadding，默认情况cellspacing、cellpadding均不为0，但经

常的状况为了不让table单元格之间的间距影响到美观，我们经常会把cellspacing、cellpadding设置为0，因此经常看到“

table

cellspacing=0

cellpadding=0”这样的代码。这样做无形中增加了代码的体积，而且也极其不符合样式与内容分离的web标准，对于我本人来说也是极其

厌恶这样的形式的，因此使用css控制cellspacing/cellpadding显的意义重大了！以下是控制方法：

table{border:0;margin:0;border-collapse:collapse;}

table

td{padding:0;}

第一行控制cellspacing，关键是“border-collapse:collapse;”这一句；第二行控制cellpadding

cellpadding

对应

td

padding

cellspacing

对应

td

margin

说的还不够清楚吗？

cellpadding，cellspacing都是废弃的属性了，早已不推荐使用，最新的html5里已经彻底去掉了这些表现型的属性。正确的做法是，合并表格边框，然后用th，td的padding设置内容和边框之间的空隙。

你想有间隔,就table

td{

padding:15px;

},就可以了啊

相关问答

Q1: 如何用CSS 定制表格单元格的宽度和高度

CSS中宽度和高度分别可以通过width和height实现，那么对于单元格的宽度和高度，则可以通过如下样式来设置

td{ width:100px; height:50px;} /*设置单元格宽度100px，高度50px*/

示例如下：

给出HTML元素

table

trtd1/tdtd2/tdtd345/td/tr

trtd6789/tdtd10/tdtd11/td/tr

/table

设置单元格高度和宽度样式

table{border-collapse:collapse;}

td{

border: 1px solid green; /*边框*/

width:100px;             /*单元格宽度*/

height:50px;             /*单元格高度*/

text-align:center;       /*单元格文字居中对齐*/

}

效果如下

Q2: CSS快速切换单元格样式 CSS样式

上面的冗余代码太多了，其实可以把这些样式放在样式表里，通过一个样式名来控制，比如

td bgcolor="#878787" height="32" style="border-top: #e6e6e6 1.0px 

solid;border-right: #e6e6e6 1.0px solid;border-bottom: #e6e6e6 1.0px 

solid;border-left: #e6e6e6 1.0px solid;border-image: none;" 

width="100"font color="#ffffff"轻微弹性/font/td

这是轻微弹性的样式，把背景色和文字颜色提取出来，放进样式表里，

.style1{

    background-color:#878787;

    color:#fff;

}

在需要这个样式的时候，给相应的单元格加上这个样式就行了。

td class="style1"/td

Q3: 怎样用CSS样式控制表格大小。谢谢

1、首先打开vscode编辑器，新建一个html文件，定义一个两行两列的表格，在浏览器打开的效果。

2、然后给表格添加边框，这里给table标签和td标签都设置边框，不过两个标签的边框颜色值不一样。

3、最后可以用width属性给表格设置宽度，用height属性设置单元格的高度，设置好后可以在浏览器看到效果。