我有一个使用这种样式的组件的表
return(
<Table id="leaderboard_view" >
<TableHead >LEADERBOARD</TableHead>
<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>
</Table>
)
所有这些都可以渲染和工作,但是我有一个问题,第一列比其他列大很多。我要实现的是,第一列较小,如宽度的15%,其余则为宽度的25%。我已经尝试了几种方式,例如使用样式化的col组件
const SmallCol = styled.col`
width: 15%;
`
const LargeCol = styled.col`
width: 25%;
`
,然后在Table和TableHead之间放置1个小样式元素和3个大样式元素,但这没有什么区别,我尝试使用不带样式元素的常规col,但是样式<tr>
似乎没有捡起来!有做过或对如何完成工作有任何线索的人吗?
这也是我的表格组件上的样式:
const Table = styled.table`
width: 100%;
margin: 0;
border-spacing: 0;
border-collapse: collapse;
`;
const TableHead = styled.thead`
font-size: 4vh;
font-weight: bold;
text-align: left;
padding 2;
}
`;
const TableData = styled.td`
font-size: 3vh;
border: 1px solid LightGrey;
height: 100%;
text-align: center;
vertical-align: middle;
}
`;
const TableDataGrey = styled.td`
font-size: 3vh;
color: LightGrey;
border: 1px solid LightGrey;
text-align: center;
vertical-align: middle;
}