Оформление двух табличных названий рядом друг с другом правильно

Question

поэтому у меня есть две таблицы, которые я показываю рядом друг с другом отлично, но у меня также есть два элемента <h3>, которые являются названиями для таблиц .. и я ищу:

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

, но вместо этого я получаю это:

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

.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; 
 
}

<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>

Итак, что я делаю неправильно? Любая помощь приветствуется. Благодарю.

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

Вы слышали о бутстрапе? Это дает вам сетку, которая идеально подходит для этого. Сказав это, вот вам решение.

<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

Использование подвесная система начальной загрузки для этой цели

Answer 4

Оберните ДИВ вокруг каждого столбца

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{ 
} 

EDIT: доделать dded: https://jsfiddle.net/Nillervision/5qvLq2t3/