1

我是 HTML 和 CSS 的新手。我制作了多个表格，并希望将它们全部显示在一个盒子内的一行上。我尝试了以下方法，但这似乎不起作用。有人可以解决这个问题吗？这是我的 CSS 代码：

#content2{
   margin: 30px 0;
   background: white;
   padding: 20px;
   clear: both;
   box-shadow: 0px 1px 1px #999;
   text-align: center;
   overflow:hidden;

}

table{
  margin-right: auto;
  margin-left: auto;
  float:left;
}
td,th{
  padding: 20px;
}

HTML 应该是正确的。

4

2 回答 2

1

与其使用 ，不如使用float: left将表格显示为内联display: inline-block

例子

请知道这将使table元素不会获得默认的全宽（您可能不想开始）。

于 2013-10-16T09:26:12.537 回答
0

您有一些我知道的选项。

1. 如果您想要纯 CSS 和“动态”（即您事先不知道宽度），您可以将表格设置为display: inline-block并删除您的浮动。这适用于 chrome，但您可能会遇到 IE 问题，尤其是旧版本。

http://jsfiddle.net/ZfX2M/

2. 如果您知道宽度，则设置具有该宽度的内部内容 div，然后设置margin:auto它。

http://jsfiddle.net/AuF7z/1/

3. 如果你不知道宽度，但你很乐意使用 JS，那么按照上面的方法做，但是在 JS 中计算宽度（我使用 jQuery 作为我以前使用的，但你可以使用原始 JS）

http://jsfiddle.net/mVADm/1/

于 2013-10-16T09:33:11.010 回答