Создание HTML таблицы Инлайн

Question

Я пытаюсь поставить две таблицы бок о бок:

<table class="inline"> 
</table> 
<table class="inline"> 
</table> 

Но ни одно из значений I присваивают не встраивать отобразим свойство из инлайн-таблицы встраивать в встроенный блок работы так Я в шоке и буду признателен за любые советы. Я нашел еще один важный вопрос: How do I make an HTML table inline и, к сожалению, решения не сработали.

Answer 1

Это не должно быть:

<table class="inline"> 
</table> 
<table class="inline"> 
</table> 

Оно должно быть:

<table style="display:inline"> 
</table> 
<table style="display:inline"> 
</table> 

Answer 2

По умолчанию таблицы элементы уровня блока, и вы должны изменить свойство отображения, чтобы получить два или более таблиц за линия, например:

<table class="inline"> 
    <tr><td>First table row 1</td></tr> 
    <tr><td>First table row 2</td></tr> 
</table> 
<table class="inline"> 
    <tr><td>Second table row 1</td></tr> 
    <tr><td>Second table row 2</td></tr> 
</table> 

со следующими CSS:

.inline { 
    outline: 1px solid blue; 
    width: 49%; 
    display: inline-block; 
} 

Вы также можете использовать inline-table, оба дают одинаковые результаты. Если вы не установите ширину, каждая таблица будет определять минимальную ширину, соответствующую содержанию. Если вы установите ширину, вы можете сделать две таблицы одинаковой ширины, что может быть желательно.

Если вы попробуете display: inline, ширина таблицы будет уменьшаться, чтобы соответствовать контенту, что может быть предпочтительным в некоторых приложениях. В этом случае значение ширины игнорируется.

Я показал три случая в следующей скрипке.

ссылка Fiddle: http://jsfiddle.net/audetwebdesign/m4fdG/