css - 寻找一种更简单的方法来使表格居中并在右侧有边距

Question

是否有更优雅(更简单)的方法来创建具有以下两个属性的 html5/css 表格:1)当小于页面时居中； 2) 当页面出现水平滚动条时，有一个有效的右边距；除了我根据在这里和其他网站上找到的一些建议所做的之外，即将它包装在内部 inline-block div 和外部表 div 中:

<DIV STYLE="display:table; margin:0 auto;">
<DIV STYLE="display:inline-block;">
<TABLE STYLE="margin-left:Npx; margin-right:Mpx...

Answer 1

不太确定你的意思，但试试这个...

将 table 放入包装器中，并使用带有 justify-content: center 和 overflow: scroll 的 Flexbox，

如果表格小于包装器，表格将居中，如果表格大于包装器，则出现水平滚动条。

#wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
  overflow: scroll;
}

Example Fiddle