前端必知必会-CSS表格table

---

CSS 表格table

利用 CSS 可以大大改善 HTML 表格的表面：
表格边框border

要在 CSS 中指定表格边框，请利用 border 属性。
以下示例为 <table>、<th> 和 <td> 元素指定了实线边框：

示例

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

复制代码

全宽表格Full-Width Table

在某些环境下，上面的表格大概看起来很小。假如您需要一个横跨整个屏幕（全宽）的表格，请将 width: 100% 添加到 <table> 元素：

示例

1. table {
2. width: 100%;
3. }

复制代码

请注意，上面示例中的表格有双边框。这是因为表格和 <th> 和 <td> 元素都有单独的边框。
要删除双边框，请检察以下示例。
折叠表格边框border-collapse

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

示例

1. table {
2. border-collapse: collapse;
3. }

复制代码

假如您只想要表格附近的边框，只需为 <table> 指定 border 属性：

示例

1. table {
2. border: 1px solid;
3. }

复制代码

表格宽度和高度

表格的宽度和高度由 width 和 height 属性定义。
以下示例将表格的宽度设置为 100%，将 <th> 元素的高度设置为 70px：

示例

1. table {
2. width: 100%;
3. }
4. th {height: 70px;}

复制代码

要创建仅占页面一半的表格，请利用 width: 50%：

示例

1. table {
2. width: 50%;
3. }

复制代码

CSS 表格水平对齐

text-align 属性设置 <th> 或 <td> 中内容的水平对齐方式（如左对齐、右对齐或居中对齐）。
默认环境下，<th> 元素的内容居中对齐，而 <td> 元素的内容左对齐。
要使 <td> 元素的内容也居中对齐，请利用 text-align: center:

示例

1. td {
2. text-align: center;
3. }

复制代码

要使内容左对齐，请利用 text-align: left 属性逼迫将 <th> 元素的对齐方式左对齐：

示例

1. th {
2. text-align: left;
3. }

复制代码

CSS 表格垂直对齐

vertical-align 属性设置 <th> 或 <td> 中内容的垂直对齐方式（如顶部、底部或中心）。
默认环境下，表格中内容的垂直对齐方式为中心（对于 <th> 和 <td> 元素而言）。
以下示例将 <td> 元素的垂直文本对齐方式设置为底部：

示例
td {
height: 50px;
vertical-align: bottom;
}
CSS表格内边距

要控制表格中边框和内容之间的空间，请在 <td> 和 <th> 元素上利用 padding 属性：

示例

1. th, td {
2. padding: 15px;
3. text-align: left;
4. }

复制代码

水平分隔线

将 border-bottom 属性添加到 <th> 和 <td> 以用于水平分隔线：
示例

1. th, td {
2. border-bottom: 1px solid #ddd;
3. }

复制代码

可悬停表格

利用 <tr> 上的 :hover 选择器在鼠标悬停时突出显示表格行：

示例

1. tr:hover {background-color: coral;}

复制代码

条纹表格

对于斑马条纹表格，利用 nth-child() 选择器并为所有偶数（或奇数）表格行添加背景颜色：
示例

1. tr:nth-child(even) {background-color: #f2f2f2;}

复制代码

表格颜色

以下示例指定 <th> 元素的背景颜色和文本颜色：

示例

1. th {
2. background-color: #04AA6D;
3. color: white;
4. }

复制代码

CSS 响应式表格

假如屏幕太小而无法显示全部内容，响应式表格将显示水平滚动条：

在 <table> 元素附近添加带有 overflow-x:auto 的容器元素（如 <div>）以使其响应：
示例

1. <div style="overflow-x:auto;">
3. <table>
4. ... 表格内容...
5. </table>
7. </div>

复制代码

注意：在 OS X Lion（在 Mac 上）中，滚动条默认隐藏，仅在利用时显示（即使设置了“overflow:scroll”）。

---

总结

本文介绍了的CSS 表格利用，如有问题欢迎私信和评论

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。