目录

CSS 表格

❮ 上一节下一节 ❯

使用 CSS 可以大大改善 HTML 表格的外观：

公司	接触	国家
阿尔弗雷德·富特基斯特	玛丽亚·安德斯	德国
伯格伦德斯纳布科普	克里斯蒂娜·伯格伦德	瑞典
蒙特苏玛商业中心	弗朗西斯科·张	墨西哥
恩斯特·亨德尔	罗兰·孟德尔	奥地利
岛屿贸易	海伦·贝内特	英国
埃森国王	菲利普·克莱默	德国
笑酒神巴克斯酒窖	塔纳姆里耀西	加拿大
里乌尼蒂食品杂志	乔瓦尼·罗韦利	意大利

亲自试一试 »

表格边框

要在 CSS 中指定表格边框，请使用border属性。

下面的示例为 <table>、<th> 和 <td> 元素指定实线边框：

名	姓
彼得	格里芬
路易斯	格里芬

示例

table, th, td {
border: 1px solid;
}

亲自试一试 »

全宽表

在某些情况下，上表可能看起来很小。如果您需要一个横跨整个屏幕（全角）的表格，请添加width: 100%到 <table> 元素：

名	姓
彼得	格里芬
路易斯	格里芬

示例

table {
width: 100%;
}

亲自试一试 »

双边框

请注意，上面示例中的表格有双边框。这是因为表格以及 <th> 和 <td> 元素都有单独的边框。

要删除双边框，请查看下面的示例。

折叠表格边框

这个border-collapse属性设置表格边框是否应折叠为单个边框：

名	姓
彼得	格里芬
路易斯	格里芬

示例

table {
border-collapse: collapse;
}

亲自试一试 »

如果您只想要表格周围有边框，只需指定border<表> 的属性：

名	姓
彼得	格里芬
路易斯	格里芬

示例

table {
border: 1px solid;
}

亲自试一试 »

❮ 上一节下一节 ❯