Foundation 的 <table>
元素样式为灰色斑马条纹且包含四个边框:
实例
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>该邮件地址已受到反垃圾邮件插件保护。要显示它需要在浏览器中启用 JavaScript。</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>该邮件地址已受到反垃圾邮件插件保护。要显示它需要在浏览器中启用 JavaScript。</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>该邮件地址已受到反垃圾邮件插件保护。要显示它需要在浏览器中启用 JavaScript。</td>
</tr>
</tbody>
</table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>该邮件地址已受到反垃圾邮件插件保护。要显示它需要在浏览器中启用 JavaScript。</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>该邮件地址已受到反垃圾邮件插件保护。要显示它需要在浏览器中启用 JavaScript。</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>该邮件地址已受到反垃圾邮件插件保护。要显示它需要在浏览器中启用 JavaScript。</td>
</tr>
</tbody>
</table>
知识兔 »
响应式表格
使用 CSS 让表格支持响应式设计:在表格外添加 <div>
元素,样式为 overflow-x:hidden
: