Question

所以我有两个表格，我已经完美地显示在一起，但我还有两个<h3>元素作为表格的标题..我正在寻找这个：

 <h3>     <h3>
|----|   |----|
|----|   |----|
|----|   |----|

但我得到了这个：

   |----|   |----|
   |----|   |----|
   |----|   |----|
<h3>     <h3>

＆＃13;

.table1 {
  display: inline-block;
  width: 30%;
  margin-bottom: 20px;
}
.table2 {
  display: inline-block;
  width: 30%;
  margin-bottom: 20px;
}
.title1 {
  display: inline-block;
}
.title2 {
  display: inline-block;
}

＆＃13;

<h3 class="title1">Table Title</h3>
<table class="table1">
  *** Table 1 ***
</table>

<h3 class="title2">Table 2 Title</h3>
<table class="table2">
  *** Table 2 ***
</table>

＆＃13;

那么，我做错了什么？任何帮助是极大的赞赏。谢谢。

Answer 1

也许您可以使用caption代码，inline-table代替inline-block来保留表格布局？

table {
  display: inline-table;
  background: gray;
}
td {
  border: 1px solid;
}
caption {
  font-size: 1.2em;
}
caption {
  font-size: 1.2em;
}

<table class="table1">
  <caption>table caption</caption>
  <tr>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
  </tr>
  <tr>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
  </tr>
  <tr>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
  </tr>
</table>
<table class="table2">
  <caption>table caption</caption>
  <tr>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
  </tr>
  <tr>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
  </tr>
  <tr>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
  </tr>
</table>

Answer 2

你听说过bootstrap吗？它为您提供了一个完美的网格系统。话虽如此，这里有一个解决方案。

<style>

.table_container { width: 100%; }
.left_table_container, .right_table_container {
    width: 49%;
    float:left;
}

.title1{
    display: inline-block;
}
.title2{
    display: inline-block;
}

</style>

<div class='table_container'>
    <div class='left_table_container'>
        <h3 class="title1">Table Title</h3>
        <br>
        <table class="table1">
            *** Table 1 ***
        </table>
    </div>
    <div class='right_table_container'>
        <h3 class="title2">Table 2 Title</h3>
        <br>
        <table class="table2">
            *** Table 2 ***
        </table>
    </div>

</div>

Answer 3

围绕每列包裹div

HTML：

<div class="col">
  <h3 class="title1">Table Title</h3>
  <table class="table1">
    *** Table 1 ***
  </table>
</div>
<div class="col">
  <h3 class="title2">Table 2 Title</h3>
  <table class="table2">
   *** Table 2 ***
  </table>
</div>

CSS：

.col{
  width:30%;
  display:inline-block;
}
.table1{
    margin-bottom: 20px;
}
.table2{
    margin-bottom: 20px;
}
.title1{
}
.title2{
}

编辑：小提琴补充：https://jsfiddle.net/Nillervision/5qvLq2t3/

Answer 4

为此目的使用bootstrap网格系统

正确渲染两个表标题

4 个答案: