Question

我有一个动态添加和删除值的列表。因为我们显示它的屏幕尺寸不高，我希望行向右移动。例如：

这是适合屏幕的表格

 ____________
|______1_____|
|______2_____|
|______3_____|

这是一张不适合屏幕的表格

 ________________________
|______1_____|_____4_____|
|______2_____|_____5_____|
|______3_____|

先谢谢，这是表格的样子。

<table id="values_table" class="table table-bordered panel">
  <tbody>
    <tr>
      <th><strong>Value</strong></th>
    </tr>

    <tr class="font-color3">
      <td data="1"></td>
    </tr>

    <tr class="font-color3">
      <td data="2"></td>
    </tr>

    <tr class="font-color3">
      <td data="3"></td>
    </tr>

    <tr class="font-color3">
      <td data="4"></td>
    </tr>

    <tr class="font-color3">
      <td data="5"></td>
    </tr>
  </tbody>
</table>

Answer 1

试试这个，jsut display: flex;

的一些技巧

＆＃13;

tbody {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 80px;
}
tr {
  border: 1px solid #000;
  width: 100%;
}

＆＃13;

<table id="values_table" class="table table-bordered panel">
  <tbody>

    <tr class="font-color3">
      <td data="1">1</td>
    </tr>

    <tr class="font-color3">
      <td data="2">2</td>
    </tr>

    <tr class="font-color3">
      <td data="3">3</td>
    </tr>

    <tr class="font-color3">
      <td data="4">4</td>
    </tr>

    <tr class="font-color3">
      <td data="5">5</td>
    </tr>
  </tbody>
</table>

＆＃13;

如何在html / css中将单个列表流向右侧？

1 个答案: