Question

我有以下代码：

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

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

非常不幸的是，在这两个表之间插入换行符。我已经尝试将它们放在一个跨度中并将空白设置为nowrap，但无济于事。请问，我能告诉我如何简单地将这些元素放在一行中，而不在CSS中设置float属性，并且不用<td> {table} </td>围绕每个表，然后将其放在表格行中。

提前多多感谢。我问Google，但它不会说什么^^ StackOverflow到目前为止仍保持沉默

Answer 1

我找到了它！

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

display: inline-table;

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

希望我帮助过......

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

Answer 3

如果您将表格1向左浮动，并将表格向右浮动，该怎么办？默认情况下，表是“块”元素，因此您可以尝试显示：inline。

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

Answer 5

table{display:inline;}无效？

Answer 6

更新：这个答案非常陈旧，今天还有新的更好的技术。

原创内容：

你应该使用CSS，因为这是一个表达问题。你为什么不能使用CSS？

我就是这样做的。简单，适用于每个浏览器，它很容易适应周围的布局元素。为两个表提供适合它们的容纳元素的宽度，并将它们两个浮动到左侧。例如：

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

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

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

Answer 8

试试这个css：

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

或者你可以破解负利润率

table{
  margin-top:-20px;
}

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

8 个答案: