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

html-css019

如何用CSS 定制表格单元格的宽度和高度,第1张

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

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

示例如下：

给出HTML元素

<table>

<tr><td>1</td><td>2</td><td>345</td></tr>

<tr><td>6789</td><td>10</td><td>11</td></tr>

</table>

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

table{border-collapse:collapse}

td{

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

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

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

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

}

效果如下

1、利用 height属性，这样是直接拉高 td 单元格的高度，缺点：文字不能对齐

2、做为height属性文字垂直不对齐的补充，增加 line-height属性，与height相同时则垂直居中，但换行则会导致两行间距太大。

3、padding-top padding-bottom 可以增加上下边距，很好用的属性，在bootstrap框架中是通过这个属性实现表格样式的。就算多行，也是一样保持间距。

或者结合使用，选择一款适合的。

.table tr td { padding:10px 0} 这样设置省事。