HTML предотвращает разрыв строки (между двумя табличными тегами)

У меня есть следующий код:

<table>
    <tr>
        <td>Table 1</td>
    </tr>
</table>

<table>
    <tr>
        <td>Table 2</td>
    </tr>
</table>

К сожалению, между этими двумя таблицами вставлен разрыв строки. Я попробовал поставить их оба в один промежуток времени и установить пробелы в nowrap, но безрезультатно. Пожалуйста, не могли бы вы рассказать мне, как я могу просто поместить эти элементы в одну строку, не устанавливая атрибут float в CSS и не окружая каждую таблицу с помощью <td> {table} </td>, а затем помещая это в строку таблицы.

Большое спасибо. Я спросил Google, но он просто ничего не сказал ^^ StackOverflow до сих пор молчал.

Ответ 1

Я нашел его!

Для обеих таблиц необходимо использовать следующие настройки:

display: inline-table;

Спасибо за inline, ребята, большое спасибо, но, по крайней мере, inline-table работает ^^

Надеюсь, я помог...

Ответ 2

В соответствии с моделью CSS:

Значения полей
не применяются к строкам таблицы и ячейкам таблицы. См. http://www.w3.org/TR/CSS2/box.html#margin-properties

значения заполнения и границы не применяются к строкам таблицы, но применяются к table cells Смотрите: http://www.w3.org/TR/CSS2/box.html#padding-properties

Быстрое исправление заключается в добавлении дополнения в верхнюю часть таблицы, которую вы хотите разделить.

Например: https://codepen.io/Gh-_-st/pen/oGKOQL

   <table cellpadding="0" cellspacing="0" border="0">
    <tr class="row1">
        <td>Row One - 1</td>
        <td>Row One - 2</td>
    </tr>
    <tr class="row2">
        <td>Row Two - 1</td>
        <td>Row Two - 2</td>
    </tr>    
   </table>
   <table cellpadding="0" cellspacing="0" border="0" class="table-2">
        <tr class="row1">
            <td>Row One - 1</td>
            <td>Row One - 2</td>
        </tr>
        <tr class="row2">
            <td>Row Two - 1</td>
            <td>Row Two - 2</td>
        </tr>    
   </table>

CSS

     td {
       border: 1px dotted blue;
     }

     .table-2 {
      padding-top: 40px;
    }

    td {
      padding : 20px;
    }

Ответ 3

Что делать, если вы плаваете в таблице 1 слева, а таблица - вправо? По умолчанию таблицы являются "блочными" элементами, поэтому вы можете попробовать отобразить: inline.

Ответ 4

или это:

<table border=1 style="position:absolute;width:100;height:30;left:0;top:100"> 
<tr> 
<td>aaaaa</td> 
</tr> 
</table> 
<table border=1 style="position:absolute;width:100;height:30;left:100;top:100"> 
<tr> 
<td>bbbbb</td> 
</tr> 
</table>

Ответ 5

table{display:inline;} не работает?

Ответ 6

Обновление. Этот ответ очень старый, и сегодня существуют новые, лучшие методы.

Исходный текст:

Вы должны использовать CSS для этого, так как это проблема с презентацией. Почему вы не можете использовать CSS?

Вот как я это сделаю. Простой, работает в каждом браузере и легко адаптируется к внешним элементам макета. Дайте обем таблицам ширину, которая соответствует им в содержащем элементе, и поместите их оба влево. Например:

<div id="container">
  <table>...</table>
  <table>...</table>
</div>

#container { width: 500px; } 
table { width: 250px; float: left; }

Ответ 7

<html>
<head>
</head>
<body>

<table style="display:inline">
    <tr>
        <td>Table 1</td>
    </tr>
</table>

<table style="display:inline">
    <tr>
        <td>Table 2</td>
    </tr>
</table>

</body>
</html>

Ответ 8

Попробуйте этот css:

table {
  padding:0px;
  margin:0px;
}

Или вы можете взломать отрицательный верхний предел

table{
  margin-top:-20px;
}