Question

我有一个使用这种样式的组件的表

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;
}

使用样式化的组件设置宽度

0 个答案: