HTML 防止换行（在两个表格标签之间）答案

【问题标题】：HTML prevent line break (between two table tags)HTML 防止换行（在两个表格标签之间）
【发布时间】：2010-06-03 20:15:08
【问题描述】：

我有以下代码：

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

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

很遗憾，在这两个表之间插入了一个换行符。我尝试将它们都放在一个跨度中并将空白设置为 nowrap，但无济于事。拜托，你能告诉我如何简单地将这些元素放在一行中，而无需在 CSS 中设置 float 属性，也不用 <td> {table} </td> 包围每个表格，然后将其放在表格行中。

提前非常感谢。我问过谷歌，但它什么也没说^^ StackOverflow 到目前为止也保持沉默

【问题讨论】：

标签： html html-table line-breaks

【解决方案1】：

我找到了！

必须对两个表使用以下设置：

display: inline-table;

感谢内联，伙计们，非常感谢，但至少内联表可以工作^^

希望我能帮上忙……

【讨论】：

有没有人注意到 display: inline-table 将表格保持在一组中？它不会跨多个页面拆分。

【解决方案2】：

根据CSS盒模型：

边距值不适用于表格行和表格单元格请参阅： http://www.w3.org/TR/CSS2/box.html#margin-properties

填充和边框值不适用于表格行，但适用于表格单元格请参阅：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 浮动到左侧，将表浮动到右侧怎么办？默认情况下，表格是“块”元素，因此您可以尝试 display: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; }

【讨论】：

我可以使用 CSS。我只是不想让一张桌子向左浮动，而另一张桌子向右浮动，但您的解决方案似乎很有趣。我现在就试试看。谢谢^
是的，我明白了。正如我在之前的评论中所说，左右浮动通常会使周围的事情复杂化，并使布局很难适应周围的内容。将事物浮动到同一侧更好。
float 通常会打开一罐难以处理的蠕虫。浮动元素往往需要对黑客进行黑客攻击，以防止它们破坏布局的其他部分。 display: inline-block（或inline-table，如已接受的答案）非常更易于使用。
为帖子添加了更新。漂浮确实是一次要走的路。 :-)

【解决方案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>

<title>Page Title</title>
</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;
}

【讨论】：