Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.2k views
in Technique[技术] by (71.8m points)

material ui - MaterialUI Table rows with different amount of cells aligned

I am trying to create a table where I essentially have two headings of different cell size and the items in the table must follow the second heading, like this:

       **Main Heading 1**         |         **Main Heading 2**
sub 11 | sub 12 | sub 13 | sub 14 | sub 21 | sub 22 | sub 23 | sub 24 
item   | item   | item   | item   | item   | item   | item   | item
...

I have tried with the following structure

<Table size="small" aria-label="stock-flow">
<TableHead>
    <TableRow>
    <TableCell>Main Heading 1</TableCell>
    <TableCell>Main Heading 2</TableCell>
    </TableRow>

    <TableRow>
    <TableCell>Sub 11</TableCell>
    <TableCell>Sub 12</TableCell>
    <TableCell>Sub 13</TableCell>
    <TableCell>Sub 14</TableCell>
    <TableCell>Sub 21</TableCell>
    <TableCell>Sub 22</TableCell>
    <TableCell>Sub 23</TableCell>
    <TableCell>Sub 24</TableCell>
    </TableRow>
</TableHead>
<TableBody>
    <TableRow>
    <TableCell>Item 11</TableCell>
    <TableCell>Item 12</TableCell>
    <TableCell>Item 13</TableCell>
    <TableCell>Item 14</TableCell>
    <TableCell>Item 21</TableCell>
    <TableCell>Item 22</TableCell>
    <TableCell>Item 23</TableCell>
    <TableCell>Item 24</TableCell>
    </TableRow>
</TableBody>
</Table>

But that aligns Main heading 1 and Main Heading 2 above sub11 and sub12 and leaves 6 empty spaces after that.

I essentially want to have 2 "main" columns and a way to create whatever sizes of columns/rows I want in each of them.

EDIT: I found the answer, I have to use the colSpan property and give it a value of the amount of cells that I want to have underneath the main heading, so both headings get colSpan={4}


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

I found the answer, I have to use the colSpan property and give it a value of the amount of cells that I want to have underneath the main heading, so both headings get colSpan={4}


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...