码农教程 - 一技在手,衣食无忧! tools

目录

CSS 响应式

❮ 上一节 下一节 ❯

响应式

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

名 姓 积分 积分 积分 积分 积分 积分 积分 积分 积分 积分 积分 积分
吉尔 史密斯 50 50 50 50 50 50 50 50 50 50 50 50
前夕 杰克逊 94 94 94 94 94 94 94 94 94 94 94 94
亚当 约翰逊 67 67 67 67 67 67 67 67 67 67 67 67

添加一个容器元素（如 <div>）overflow-x:auto围绕 <table> 元素以使其响应：

示例

<div style="overflow-x:auto;">

<table>
... table content ...
</table>

</div>
亲自试一试 »

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

更多示例

做一张别致的表格
此示例演示了如何创建精美的表格。

设置表格标题的位置
此示例演示如何定位表格标题。

通过练习测试一下

练习:

将 table、th 和 td 元素的边框设置为 "2px solid green"。

<style>
 {
  : 2px solid green;
}
</style>

<body>
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>
</body>

开始练习

CSS 表属性

Property Description
border Sets all the border properties in one declaration
border-collapse Specifies whether or not table borders should be collapsed
border-spacing Specifies the distance between the borders of adjacent cells
caption-side Specifies the placement of a table caption
empty-cells Specifies whether or not to display borders and background on empty cells in a table
table-layout Sets the layout algorithm to be used for a table

❮ 上一节 下一节 ❯