了解下Foundation 表格

喔28 • • 服务器技术文章 • 365 阅读
Foundation 表格

Foundation 的 <table> 元素样式为灰色斑马条纹且包含四个边框：

Firstname Lastname Email City Age Country
John Doe john@example.com New York 35 USA
Mary Moe mary@example.com Chicago 51 USA
July Dooley july@example.com San Francisco 38 USA
实例
<table>
  <thead>
    <tr>
<th>Firstname</th>
      <th>Lastname</th>
<th>Email</th>
    </tr>
  </thead>
  <tbody>
<tr>
      <td>John</td>
<td>Doe</td>
      <td>john@example.com</td>
</tr>
    <tr>
<td>Mary</td>
      <td>Moe</td>
<td>mary@example.com</td>
    </tr>
<tr>
      <td>July</td>
<td>Dooley</td>
      <td>july@example.com</td>
</tr>
  </tbody>
</table>
响应式表格

使用 CSS 让表格支持响应式设计：在表格外添加 <div> 元素，样式为 overflow-x:hidden:

实例
<div style="overflow-x:hidden">
  <table>
...
  </table>
</div>
以上是了解下Foundation 表格的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>