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

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

line-breaks html-table html

arik · 技术社区 · 15 年前

我有以下代码:

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

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

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

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

8 回复 | 直到 8 年前

arik 15 年前

我找到了!

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

display: inline-table;

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

希望我能帮忙…

Baach 8 年前

根据 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 15 年前

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

MUG4N 15 年前

或者:

<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 15 年前

table{display:inline;} 没用?

Arve Systad 8 年前

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

原始内容:

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

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

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

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

Sunil gongle 8 年前

<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 15 年前

试试这个CSS:

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

或者你可以侵入负上边缘

table{
  margin-top:-20px;
}

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

8 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

8 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

8 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

8 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

8 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

8 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

8 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

8 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

8 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

8 月前