Foundation 表格

前言

• Foundation 表格。

1、表格

• 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>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>

• 效果 🔗

  

2、响应式表格

• 使用 CSS 让表格支持响应式设计：在表格外添加 <div> 元素，样式为 overflow-x: hidden;，如果空间不足会出现垂直滚动条:

• 实例

  <div class="responsive">
      <table>
          <thead>
              <tr>
                  <th>Firstname</th> <th>Lastname</th> <th>Email</th> <th>City</th> <th>Age</th> <th>Country</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <td>John</td> <td>Doe</td> <td>john@example.com</td> <td>New York</td> <td>35</td> <td>USA</td>
              </tr>
              <tr>
                  <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> <td>Chicago</td> <td>51</td> <td>USA</td>
              </tr>
              <tr>
                  <td>July</td> <td>Dooley</td> <td>july@example.com</td> <td>San Francisco</td> <td>38</td> <td>USA</td>
              </tr>
          </tbody>
      </table>
  </div>

• 效果 🔗