使用样式化组件/CSS 在表格内居中

Posted 2023-03-15

【中文标题】使用样式化组件/CSS 在表格内居中

【英文标题】：Center Inside Table Using Styled Components/CSS

【发布时间】：2021-12-06 05:15:59

【问题描述】：

我需要将"No data available" 放在桌子上。如何在不触及 TableHeader css 的情况下将其居中？

这里是代码沙盒CLICK HERE

const Container = styled.div`
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
`;

const Center = () => 
  return (
    <tbody>
      <tr>
        <td>
          <Container>No data available</Container>
        </td>
      </tr>
    </tbody>
  );
;

【参考方案1】：

将colspan="5" 添加到您的 TD 以使您的 tbody 中的单个列与您的 thead 中的 5 个列的长度相匹配。

“colspan”中的数字需要与thead 中的列数匹配，因此如果thead 是动态的，则您也需要将colspan 中的数字设为动态。

const Container = styled.div`
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
`;

const Center = () => 
  return (
    <tbody>
      <tr>
        <td colspan="5">
          <Container>No data available</Container>
        </td>
      </tr>
    </tbody>
  );
;