如何用Material UI创建固定两列、行数不同的表格？

Got it, let's break this down! Material UI's default Table component is built for rows that have matching column counts, but we can work around that to get the unequal-row two-column table you're aiming for. Here are two straightforward approaches:

Approach 1: Flexbox Split Columns (Most Flexible) #

Treat each column as its own standalone table, then use flexbox to line them up side by side. This lets you fully customize the row count for each column independently—perfect if the two columns have totally separate content or big row count differences.

Code Example #

import { Table, TableHeader, TableRow, TableHeaderColumn, TableBody, TableRowColumn, Paper } from 'material-ui/Table';
import { styled } from '@mui/material/styles';

// Flex container to line up the two columns
const ColumnWrapper = styled('div')({
  display: 'flex',
  gap: '1rem', // Space between columns
  padding: '1rem',
});

// Style for each single-column table
const SingleColTable = styled(Table)({
  minWidth: '220px',
});

export default function UnequalRowTable() {
  return (
    <Paper elevation={2}>
      <ColumnWrapper>
        {/* First Column: 5 rows */}
        <SingleColTable>
          <TableHeader>
            <TableRow>
              <TableHeaderColumn>ID</TableHeaderColumn>
            </TableRow>
          </TableHeader>
          <TableBody>
            <TableRow><TableRowColumn>1</TableRowColumn></TableRow>
            <TableRow><TableRowColumn>2</TableRowColumn></TableRow>
            <TableRow><TableRowColumn>3</TableRowColumn></TableRow>
            <TableRow><TableRowColumn>4</TableRowColumn></TableRow>
            <TableRow><TableRowColumn>5</TableRowColumn></TableRow>
          </TableBody>
        </SingleColTable>

        {/* Second Column: 3 rows */}
        <SingleColTable>
          <TableHeader>
            <TableRow>
              <TableHeaderColumn>Name</TableHeaderColumn>
            </TableRow>
          </TableHeader>
          <TableBody>
            <TableRow><TableRowColumn>John Smith</TableRowColumn></TableRow>
            <TableRow><TableRowColumn>Randal White</TableRowColumn></TableRow>
            <TableRow><TableRowColumn>Stephanie Sanders</TableRowColumn></TableRow>
          </TableBody>
        </SingleColTable>
      </ColumnWrapper>
    </Paper>
  );
}

Approach 2: rowSpan for Small Differences #

If the row count difference is small (like one column has 2 extra rows), you can use the rowSpan attribute on table cells to merge rows in the shorter column. This keeps the traditional table semantic structure intact.

Code Example #

import { Table, TableHeader, TableRow, TableHeaderColumn, TableBody, TableRowColumn, Paper } from 'material-ui/Table';

export default function UnequalRowTableWithRowSpan() {
  return (
    <Paper elevation={2} style={{ padding: '1rem' }}>
      <Table>
        <TableHeader>
          <TableRow>
            <TableHeaderColumn>ID</TableHeaderColumn>
            <TableHeaderColumn>Name</TableHeaderColumn>
          </TableRow>
        </TableHeader>
        <TableBody>
          {/* First 3 rows have data in both columns */}
          <TableRow>
            <TableRowColumn>1</TableRowColumn>
            <TableRowColumn>John Smith</TableRowColumn>
          </TableRow>
          <TableRow>
            <TableRowColumn>2</TableRowColumn>
            <TableRowColumn>Randal White</TableRowColumn>
          </TableRow>
          <TableRow>
            <TableRowColumn>3</TableRowColumn>
            <TableRowColumn>Stephanie Sanders</TableRowColumn>
          </TableRow>
          {/* Next 2 rows only have ID data; hide the empty Name cell and span it across 2 rows */}
          <TableRow>
            <TableRowColumn>4</TableRowColumn>
            <TableRowColumn rowSpan={2} style={{ visibility: 'hidden' }}></TableRowColumn>
          </TableRow>
          <TableRow>
            <TableRowColumn>5</TableRowColumn>
          </TableRow>
        </TableBody>
      </Table>
    </Paper>
  );
}

Quick Recommendation #

• Go with Approach 1 if your columns are independent or have a big row count gap—it's easier to maintain and more flexible.
• Use Approach 2 if you need to keep the table's semantic structure and only have a small row count difference.

内容的提问来源于stack exchange，提问作者RamAlx