css中怎么让table居中显示

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

在前端开发中,使用table标签做表格是非常常见的。但有时候我们需要将这些表格居中显示,那么该如何实现呢?首先需要通过CSS选择表格的DOM元素,这里我们假设表格的id为my-table。下面是一种实

在前端开发中,使用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协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css中怎么让table居中显示

粉丝

0

关注

0

收藏

0

已有0次打赏