Question

我有一个html表：

<table>
<tr> <td>data...</td>  <td>data...</td>  <td>data...</td> </tr>
</table>

显示为：

-------------------------
|data...|data...|data...|
-------------------------

在大屏幕上很好，但我想要的是在屏幕很小的情况下根据需要将列分成多行。

因此，在需要时，表格将显示为：

----------
|data....|
|--------|
|data....|
|--------|
|data....|
----------

有没有办法用css这样的东西来做？

Answer 1

您可以使用媒体查询Fiddle

更改为display: table-row

@media(max-width: 480px) {
  td {
    display: table-row;
  }
}

<table>
<tr> <td>data...</td>  <td>data...</td>  <td>data...</td> </tr>
</table>

Answer 2

You can use display:block as for break the column

@media(max-width: 480px) {
  td {
    display:block;
  }
}

<table>
<tr> <td>data...</td>  <td>data...</td>  <td>data...</td> </tr>
</table>

Answer 3

将td设为显示块，并将宽度设为100％。

＆＃13;

@media screen and (max-width:768px){
th,td { display:block; width:100%; }
  }

＆＃13;

  <table>
    <thead>
      <tr>
        <th>#</th>
        <th>#</th>
        <th>#</th>
        <th>#</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
      </tr>
    </tbody>
  </table>

＆＃13;

HTML中断表列（TD）到小屏幕上的多行

3 个答案: