Question

我有此表，由于某种原因，th采取col宽度，而不是tds采取其宽度。有什么办法喜欢排除使用col的吗？

这是使用样式化组件的css

const TableHead = styled.th`
font-size: 4vh;
text-align: left;
width: 100%;

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    font-size 2.5vh;
    border-radius: 5px;
    padding: 0;
    width: 100%;
    background-color: black;
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    font-size 2.5vh;
}
`;

const TableData = styled.td`
font-size: 3vh;
border: 1px solid LightGrey;
height: 100%;
text-align: center;
vertical-align: middle;

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) 
, only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    font-size 2vh;
}
`;

const TableDataGrey = styled.td`
font-size: 3vh;
color: LightGrey;
border: 1px solid LightGrey;
text-align: center;
vertical-align: middle;

@media only screen and (min-device-width : 320px) and (max-device-width : 480px)
 ,only screen and (min-device-width : 768px) and (max-device-width : 1024px){
    font-size 2vh;
}
`;

const SmallCol = styled.col`
width: 15%;
`
const LargeCol = styled.col`
width: 25%;
`

这是它的渲染方式和方式

{
    const { displayWidth } = this.props;
    const isMobile = displayWidth <= 480;

    if(isMobile) {
    return (            
        <Table id="leaderboard_view" >
        <TableHead onClick={this.handleCollapse}>LEADERBOARD</TableHead>
        <colgroup>
        <SmallCol/>
        <LargeCol/>
        <LargeCol/>
        <LargeCol/>
        </colgroup>
        { this.state.showLeaderboard ?  <tbody>
                    <tr>
                        <TableDataGrey>#</TableDataGrey>
                        <TableData>PLAYER</TableData>
                        <TableData>AWARD</TableData>
                        <TableData>SCORE</TableData>
                    </tr>
                    {list.map(user => 
                    <tr>
                    <TableDataGrey>{user.place}</TableDataGrey>
                    <TableData>{user.player}</TableData>
                    <TableData>{user.award}</TableData>
                    <TableData>{user.score}</TableData>
                    </tr>
                )}
                </tbody>  : null}
        </Table>

         )
        }

我想如果只是将th放在col之前，它将忽略它，但是它仍然只能得到SmallCol宽度，我认为这很奇怪，因为<TableDataGrey>也获得了SmallCol。有人有类似的问题吗？

如您所见，这里的th和第一个col一样大，但是我需要它像我在CSS中所说的那样是整个表格的100％宽度。

th使用col宽度，即使其外部col

0 个答案: