с использованием ширины столбца, хотя его внешнее - PullRequest
Новая
       15

с использованием ширины столбца, хотя его внешнее

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

У меня есть эта таблица, и по какой-то причине th принимает ширину столбца вместо только 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 здесь такой же большой, как и первый столбец, но мне нужно, чтобы он был на 100% ширины всей таблицы, как я уже говорил в CSS.

enter image description here

...