ReactJS и MaterialUI: одинаковая ширина для всех столбцов таблицы - PullRequest
Новая
       20

ReactJS и MaterialUI: одинаковая ширина для всех столбцов таблицы

0 голосов
/ 30 сентября 2018

Используя ReactJS и MaterialUI, я пытаюсь иметь одинаковую ширину для всех столбцов таблицы.Я ожидал, что это будет поведение по умолчанию, когда я не устанавливаю ширину, но это не так: последний столбец всегда меньше.

Я сделал небольшой пример для codesandbox: https://codesandbox.io/s/18l6nn393q

На самом деле я мог бы установить ширину всех столбцов на 33%, и это работало бы для этого конкретного случая, но это усложняется, если число столбцов является переменным.Каков стандартный способ получения столбцов одинаковой ширины с использованием ReactJS и Table of MaterialUI?

1 Ответ

0 голосов
/ 30 сентября 2018

Я делаю столбец с width: 'calc(100%/3)', поэтому он будет иметь 3 столбца равной ширины. Я сделал CustomTableCell для общего стиля width: 'calc(100%/3)'

const CustomTableCell = withStyles(theme => ({
  root: { 
    width: 'calc(100%/3)'
  }
}))(TableCell);

Песочница: https://codesandbox.io/s/6l1ypx6v3r (возникли проблемы наFireFox)

Результат, подобный этому enter image description here

Редактировать: после обратной связи @flitz мое решение не работает на FireFox.Я внес некоторые изменения, чтобы он мог лучше поддерживать Firefox также

с этой CustomTableCell 

const CustomTableCell = withStyles(theme => ({
  root: {
    width: "calc(100vw/3)",
    padding: "10px 24px",
    display: "table-cell"
  }
}))(TableCell);

Песочница (исправить проблему с FireFox): https://codesandbox.io/s/xolxro983p

...