如何用css控制table的边框宽度和边框颜色

Posted 2023-05-11

参考技术A 可以通过设置单元格元素td的边框样式来实现：

1

border: width style color; /*分别设置边框的粗细、样式和颜色*/

示例如下：
在html代码中给出两个表格

<table class="tb1">
<tr><td>有</td><td>志</td><td>者</td></tr>
<tr><td>事</td><td>竟</td><td>成</td></tr>
</table>
<table class="tb2">
<tr><td>苦</td><td>心</td><td>人</td></tr>
<tr><td>天</td><td>不</td><td>负</td></tr>
</table>

分别设置不同的样式

table /* 表格整体样式 */
margin:50px; /* 外边距50px */
border-collapse:collapse; /* 合并为单一的边框线 */

/* 设置tb1类的表格样式 */
table.tb1 tdpadding:10px;border:1px solid green;
/* 设置tb2类的表格样式 */
table.tb2 tdpadding:20px;border:5px dashed blue;

CSS边框样式

边框样式

很多HTML元素都有边框，如img, table, td, div, input等。

border-style边框样式，枚举值

border-width边框宽度，长度值

border-color边框颜色，颜色值

可以合并上面三个样式属性border: solid 2px red;

还可以分别控制上下左右边框的样式，如border-top-color样式属性

table元素使用border-collapse:collapse;可以合并单元格边框