在前端开发中,使用table标签做表格是非常常见的。但有时候我们需要将这些表格居中显示,那么该如何实现呢?
首先需要通过CSS选择表格的DOM元素,这里我们假设表格的id为my-table。下面是一种实现方式:
#my-table {
margin: auto;
width: 80%;
}
上面的代码中,我们使用了margin属性来控制元素与父元素的距离。将左、右margin设置为auto即可让表格居中显示。其中width属性用来设置表格的宽度,这里设置为80%。
当然,如果你不想使用id来选择表格,可以使用以下代码:
table {
margin: auto;
width: 80%;
}
这样就可以选择页面中所有的表格,并且让它们都居中显示。
希望这篇文章能够对你有所帮助,并让你更好地掌握CSS。
文章说明:
本文原创发布于探乎站长论坛,未经许可,禁止转载。
题图来自Unsplash,基于CC0协议。
该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。