代码之家 › 专栏 › 技术社区 › arik

HTML防止换行(两个表标记之间)

line-breaks html-table html

arik · 技术社区 · 14 年前

我有以下代码:

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

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

非常不幸的是,在这两个表之间插入了换行符。我试过将它们放在一个范围内,并将空白设置为nowrap,但没有用。请告诉我,如何将这些元素简单地放在一行中,而不在CSS中设置float属性,也不在每个表中使用 <td> {table} </td> 然后把它放到表格行中。

提前多谢。我问过谷歌,但它什么也没说。^^stackoverflow到目前为止还保持沉默。

8 回复 | 直到 7 年前

arik 14 年前

我找到了!

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

display: inline-table;

谢谢你的直插,伙计们,非常感谢,但至少,直插表可以用。^^

希望我能帮忙…

Baach 7 年前

根据 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;
    }

Ken Ray 14 年前

如果您将表1向左浮动,表向右浮动,会怎么样?默认情况下,表是“block”元素,因此您可以尝试display:inline。

MUG4N 14 年前

或者:

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

edl 14 年前

table{display:inline;} 没用?

Arve Systad 7 年前

更新 :这个答案是非常古老的,今天有了新的更好的技术。

原始内容:

您应该为此使用CSS,因为它是一个表示性问题。为什么不能使用CSS?

我就是这样做的。简单,在每一个浏览器中都可以工作,它很容易适应周围的布局元素。为这两个表赋予一个宽度,使其与包含元素相匹配,并将两个表都向左浮动。例如:

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

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

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

-1

Sarfraz 14 年前

试试这个CSS:

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

或者你可以侵入负上边缘

table{
  margin-top:-20px;
}