Таблица MaterialUI - столбцы равной ширины с использованием Span? - PullRequest
Новая
       0

Таблица MaterialUI - столбцы равной ширины с использованием Span?

0 голосов
/ 06 октября 2018

Я пытаюсь использовать компонент Table из пользовательского интерфейса материалов для построения таблицы данных.Тем не менее, я борюсь с созданием столбцов равной ширины для моих данных.В настоящее время я пытаюсь что-то вроде этого: 

<TableCell key={props.name} style={{width: '25%'}}>
          <span
            style={{
              width: `${(100 / props.numCols)}%`,
              whiteSpace: "pre",
              overflow: "scroll",
              display: 'block'
            }}
          >
            {props.value}
          </span>
 </TableCell>

Однако, похоже, это не сработает.Я ожидаю 4 столбца одинаковой ширины, но на этом фото вы увидите, что вы можете видеть только 3 столбца (четвертый столбец находится за пределами экрана), и, в частности, третий столбец очень длинный.Я был бы признателен за любые указатели!

enter image description here

Редактировать: Кажется, что свойство width фактически принимает 100% длины текста?Есть ли способ, которым я могу получить ширину стола?

Ответы [ 2 ]

0 голосов
/ 30 мая 2019

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

<Table style={{ tableLayout: 'fixed' }} > .. </Table>
0 голосов
/ 06 октября 2018

Кажется, что единственный способ установить четную ширину столбца - принудительно установить ширину tablehead / th, используя max-width и mix-width.К сожалению, ни одно из свойств не использует функцию calc().И, к сожалению, старый добрый width не повлияет на строки.Вы должны установить предопределенную максимальную ширину и ширину смешивания в px / em / rem.

Еще больше плохих новостей ... Материал интерфейса использует динамические className s, так что выне можете переписать их стили, если хотите.

Вы вынуждены либо: установить встроенные стили для каждого компонента {{ maxWidth: 300 }}, использовать глобальное переопределение CSS пользовательского интерфейса (см. Рабочий пример здесь )или просто измените весь элемент с помощью scoped CSS.

. Путь с наименьшим сопротивлением / меньшим количеством беспорядка проекта будет заключаться в использовании элементов CSS и области действия, заключая их в содержащие div или span с className, например: 

<div className="container">
  <table>
    ...
  <table>
<div>

, что означает:

.container > table { ... }

, однако, не все элементы могут быть упакованы И этовсе еще требует, чтобы некоторые свойства были !important.

Рабочий пример: https://codesandbox.io/s/6nwpkylw33

Table.js 

import React from "react";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";
import rows from "./rowsData";

export default () => (
  <div>
    <h1 className="title">Material UI - Responsive Table</h1>
    <Paper className="container">
      <Table>
        <TableHead>
          <TableRow>
            <TableCell>Dessert (100g serving)</TableCell>
            <TableCell numeric>Calories</TableCell>
            <TableCell numeric>Fat (g)</TableCell>
            <TableCell numeric>Carbs (g)</TableCell>
            <TableCell numeric>Protein (g)</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map(({ id, name, calories, fat, carbs, protein }) => (
            <TableRow key={id}>
              <TableCell component="th" scope="row">
                {name}
              </TableCell>
              <TableCell numeric>{calories}</TableCell>
              <TableCell numeric>{fat}</TableCell>
              <TableCell numeric>{carbs}</TableCell>
              <TableCell numeric>{protein}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </Paper>
  </div>
);

стилей.css 

.container {
  overflow-x: auto;
  margin-right: auto;
  margin-left: auto;
  margin-top: 50px;
  padding: 10px;
  margin: 10px;
}

.title {
  margin-top: 20px;
  text-align: center;
}

tr {
  height: 40px !important;
}

th {
  max-width: 125px;
  min-width: 125px;
  padding: 0 !important;
  overflow-x: auto;
  white-space: nowrap; /* <== comment/remove this if you want long strings to alter row heights */
  text-align: center !important;
}

td {
  height: 40px !important;
  padding: 5px !important;
  text-align: center !important;
}
...