CSS定位多个表

Question

我的 css bootstrap 有问题。我有一个包含多个 table 的网页，它们必须并排。但是我的 css 把一切都搞砸了 :/

真正的问题是，我不能将不同的 css 属性放在不同的 table 上。每个 table 都具有相同的属性（循环打印）

我的页面应该是这样的：

[table] [table] [table]

[table] [table] [table]

[table]

但它是这样的：

[table] [table] [table]

............................[table]

[table] [table] [table]

( '.' 是间距)

我的 bootstrap tables 属性 :

table {
  background-color: #646569;
  float: left;
  color: #ffffff;
  border-radius: 4px;
}

.table {
  width: 30%;
  max-width: 30%;
  margin-bottom: 20px;
}

我的 html table :

<table class='table table-bordered table-responsive sortable'>

有人可以帮助我或给我提示吗？泰！ ^^

Answer 1

在您的 html 中，如果您将每个 table 包装在 bootstrap 列 class 中，它应该可以像这样解决您的问题：

<div class="col-md-4 col-xs-12">
   <table class='table table-bordered table-responsive sortable'>
   </div>
</div>

如果这样做，您可以从 table 中删除 float:left;，从您的 .table class 中删除 width: 30%; 和 max-width: 30%;。

您的 CSS 将变成这样：

table {
  background-color: #646569;
  color: #ffffff;
  border-radius: 4px;
}

.table {
  margin-bottom: 20px;
}

Answer 2

不要漂浮它们。请改用 display: inline-table;。

CSS定位多个表

CSS positioning multiple tables

html

css

twitter-bootstrap

css-tables