反应材料 ui 表不会拉伸填充

Posted 2023-02-22

【中文标题】反应材料 ui 表不会拉伸填充

【英文标题】：React material ui table won't stretch to fill

【发布时间】：2020-06-04 13:08:20

【问题描述】：

我正在通过使用示例（而不是 react-virtualized）来试验我自己的虚拟化，但我遇到了样式问题

谁能告诉我为什么下面代码沙箱中的材料表不会拉伸以适应它的纸张组件？我确定我需要在某处设置一个 CSS 属性，但我不确定它是什么

https://codesandbox.io/s/material-ui-table-virtualization-c8tys

任何帮助将不胜感激

谢谢！

亚当

【参考方案1】：

我为你做了一个例子。我认为这是您正在寻找的东西。

我添加了一个自定义类 DataTable-tableWrapper-3 和 display: table 并使用 display: inline-table 和 width: 100% 制作每一行。

https://codesandbox.io/s/material-ui-table-virtualization-h1c2e

【讨论】：

啊甜蜜！好东西。非常感谢 :) 只是一个问题 - 我看不出 DataTable-tableWrapper-3 是如何应用的。你能解释一下吗？

是的，当然。我在styles.css 中添加了自定义类，带有!important。但是，如果您不想这样做，您可以在 DataTable.js 中的 tableWrapper 键中将 display 的值从 flex 更改为 table。它应该是工作。这是另一个例子。 codesandbox.io/s/material-ui-table-virtualization-p431e

【参考方案2】：

这与 React 并没有真正的关系，而是更多地与您如何使用 html 和 css 构造和设置表格样式有关。

为什么不在 table 元素上使用 width: 100%; css 规则？这会给你你想要的结果：

table 
  float: left;
  width: 100%;
  border-collapse: collapse;
  border: 1px solid lightgray;


table tr 
  height: 37px;


table thead 
  background-color: lightgray;
  font-weight: bold;


table tbody tr:nth-child(even) 
  background-color: #ededed;


table 

<table>
  <thead>
    <tr>
      <th>Id</th>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>01</td>
      <td>John</td>
      <td>Doe</td>
      <td>31</td>
    </tr>
    <tr>
      <td>02</td>
      <td>Marie</td>
      <td>Curie</td>
      <td>66</td>
    </tr>
    <tr>
      <td>01</td>
      <td>Larry</td>
      <td>Tesler</td>
      <td>75</td>
    </tr>
    <tr>
      <td>01</td>
      <td>Sheldon</td>
      <td>Cooper</td>
      <td>35</td>
    </tr>
  </tbody>
</table>