Как изменить ширину ячейки таблицы в таблице Material-ui React

Question

Я создал таблицу в действии, используя демонстрации, размещенные на их странице , это прекрасно работает, но мне было интересно, как изменить ширину / отступы разных столбцов.

Я пытался вручную установить ширину в каждой ячейке, например, так:

<TableCell style={{ width: "10%" }}> Number </TableCell>

Так же, как и использование стиля const, затем ссылаться на него, но ни одна из них не работает.У кого-нибудь есть какие-либо идеи?Я действительно не хотел бы использовать функцию прокрутки, когда ячейки так заполнены, это смешно.Заранее спасибо!

РЕДАКТИРОВАТЬ Приведенный выше код на самом деле работает, но небольшие изменения делают его незаметным - изменение ширины на 1px все еще оставляет огромное пространство между ячейками.Может быть проблема с отступами?Я пробовал установить отступ в 0 несколькими способами, но ничего не происходит.

Answer 1

Я заявил в вопросе, что ширина и заполнение не работали для достижения меньшего пространства между столбцами, но если оба использовались вместе и пробовали с разными числами, они могут работать, чтобы сделать пространство намного меньшим (В моем случае,Ширина 1px, и отступы 20px работали отлично).Таким образом, код, приведенный в вопросе, работает, «padding: 20px» просто необходимо добавить, чтобы он вступил в силу.

Answer 2

Смотрите здесь, я добавил пример для первого столбца, чтобы иметь пользовательскую ширину и обернуть содержимое с помощью пользовательского CSS:

https://codesandbox.io/s/xv9orx4zrw

Добавить постоянное значение, как показано ниже, и обратитьсяэто в столбце

const customColumnStyle = { maxWidth: "5px", backgroundColor: "green" };

Тогда в ТД обращайтесь вот так

<CustomTableCell style={customColumnStyle}>