Question

<table>
    <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
    <tr>
</table>

如何使表格完全响应？

Answer 1

使表完全响应的最佳方法是使用引导程序。 Bootstrap是最流行的HTML，CSS和JS框架，用于在Web上开发响应式移动优先项目。

Download引导程序并包含其样式表

 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

然后只需使用bootstrap表类..

 <table class="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>

您的桌子将对所有设备完全响应..但不要忘记使用视口..

<meta name="viewport" content="width=device-width, initial-scale=1.0">

您可以在w3schools上查看演示并获取bootstrap here

使表格完全响应

1 个答案: