时间戳

首页 > 解决方案 > Material UI 创建多行数据表行

html-table - Material UI 创建多行数据表行

问题描述

目前我正在尝试使用 Material UI 创建一个表格。我想要工作的是一个表格行，每个行row总共td有 8 个td。每行中的最后一个应该跨越同一行中的 7 个列。

我不知道是否以及如何在一行内实现此布局，或者我是否必须在两个单独的行内实现此布局？

在此处输入图像描述

标签： html-tablematerial-ui

解决方案

可以通过display: flex;在您的tr. 如果第一行超过了它的最大空间，我们还需要使用它flex-wrap: wrap;来使项目换行（创建一个新行）。

table {
 width:100%
}
tr{
 width: 100%;
 display: flex;
 flex-flow: row;
 flex-wrap: wrap;
}
tr td {
 flex: 1 0 13%;
 border: 1px solid black;
 background: gray;
}

/* Color the last td to better illustrate that it spans the whole row. */
tr td:last-child {
 background: orange;
}
<table>
 <tr>
  <td>a</td>
  <td>b</td>
  <td>c</td>
  <td>d</td>
  <td>e</td>
  <td>f</td>
  <td>g</td>
  <td>h</td>
 </tr>
 <tr>
  <td>i</td>
  <td>j</td>
  <td>k</td>
  <td>l</td>
  <td>m</td>
  <td>n</td>
  <td>o</td>
  <td>p</td>
 </tr>
</table>

在我创建的代码段中要注意的重要部分是flex: 1 0 13%;：

  flex-grow: 1; // take up as much space as possible
  flex-shrink: 0; // don't shrink item to fit in flex container
  flex-basis: 13%; // set the initial main size of the flex item to 13% of available space

当每个弹性项目需要至少 13% 的可用空间时，td第一行应该有足够的空间用于 7 秒 (7*13 = 91)。第一行剩余的 9% 空间不足以容纳第 8td行，因此它换行到新行。第 8 个td将占用第二行的剩余可用空间，因为flex-grow: 1;.

推荐阅读