Center Inside Table Using Styled Components/CSS-CodePudding

I need to center the "No data available" on the table. How do I center it without touching the TableHeader css?

Codesandbox here 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>
  );
};

CodePudding user response：

Add colspan="5" to your TD to make the single col in your tbody match the length of the 5 cols in your thead.

The number in "colspan" needs to match the number of columns in your thead, so if that thead is dynamic, you need to make the number in colspan dynamic too.

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