Css 设置<；td>；使用样式化组件的宽度

我有一个使用类似这样的样式化组件的表

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>
 )

然后把1个小的和3个大的样式化组件放在桌子和桌面之间，但是没有区别，我试着只使用常规的没有样式化组件的col，但是我的样式化

似乎没有起作用！有谁做过这件事或者对如何做有线索吗

以下是“我的桌子”组件上的样式：

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

---

试着把

表格布局：固定的
放在表格上。@Jackson做到了！谢谢！：）
    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;
}