主页 / 问题 / 1272756
Accepted
fixer
Asked:2022-04-21 06:25:18 +0000 UTC2022-04-21 06:25:18 +0000 UTC

将最后一个单元格移动到新行

  • 772

我有一张有很多列的表。如何让最后一列换行？我尝试通过flexes来做，但问题是它需要被转移flex-wrap:wrap，并且它转移了所有不适合屏幕的单元格，即这个选项不适合。我只需要传输最后一个单元格，其余的可以尽可能多地超出屏幕。是否有可能解决这个问题，如果不是通过弯曲，那么以另一种方式？条件 - 您不能添加 tr。

.row{
  display:flex;
  flex-wrap:wrap;
}
.row input{
  width:100px;
}
.row td:last-of-type{
  width:100%;
}
.row textarea{
  width:100%;
}
<table id="mytable">
  <tr id="row1" class="row">
    <!--Все ячейки, кроме последней, должны быть в одну строчку и могут выходить за пределы экрана-->
    <td><input type="text"/></td>
    <td><input type="text"/></td>
    <td><input type="text"/></td>
    <td><input type="text"/></td>
    <td><input type="text"/></td>
    <td><input type="text"/></td>
    <td><input type="text"/></td>
    <td><input type="text"/></td>
    <td><textarea>Эта ячейка должна быть на новой строчке на всю ширину</textarea></td>
  </tr>
</table>

html

1 个回答

  1. Best Answer

    /* Все элементы выстраиваются в одну строку */
tr { white-space: nowrap; }

/* Все элементы блочные, обтекаются другими элементами */
td { display: inline-block; }

/* Последний элемент блочный */
td:last-child { display: block; }
    <table id="mytable">
  <tr id="row1" class="row">
    <!--Все ячейки, кроме последней, должны быть в одну строчку и могут выходить за пределы экрана-->
    <td><input type="text"/></td>
    <td><input type="text"/></td>
    <td><input type="text"/></td>
    <td><input type="text"/></td>
    <td><input type="text"/></td>
    <td><input type="text"/></td>
    <td><input type="text"/></td>
    <td><input type="text"/></td>
    <td>Эта ячейка должна быть на новой строчке на всю ширину</td>
  </tr>
</table>

    • 3

相关问题