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

Question

我需要把"No data available"放在桌子的中央。我如何在不触及TableHeader css的情况下居中?

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

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