Реактивный материал не будет растягиваться, чтобы заполнить

Question

Я экспериментирую со своей собственной виртуализацией на примере (а не с реактивной виртуализацией), и у меня возникают проблемы со стилем

Может кто-нибудь сказать мне, почему таблица материалов в изолированной программной среде кода ниже выиграла не растягивается, чтобы соответствовать бумажному компоненту? Я уверен, что есть свойство CSS, которое мне нужно где-то установить, но я не уверен, что это такое

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

Любая помощь будет принята с благодарностью

Спасибо!

Адам

Answer 1

Я сделал пример для вас. Я думаю, это то, что вы ищете.

Я добавил пользовательский класс DataTable-tableWrapper-3 с display: table, и я делаю каждую строку с display: inline-table и width: 100%.

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

Answer 2

Это на самом деле не связано с React, но больше связано с тем, как вы структурируете и стилизуете таблицу, используя html и css.

Почему бы просто не использовать правило width: 100%; css на вашем компьютере? table элемент? Это даст вам желаемый результат:

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>