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

发布于 2024-09-04 07:05:33 字数 452 浏览 8 评论 0原文

我有以下代码：

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

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

非常不幸的是，在这两个表之间插入了换行符。我尝试将它们放在一个跨度中并将空白设置为 nowrap，但无济于事。请您告诉我如何简单地将这些元素放在一行中，而无需在 CSS 中设置浮动属性，也不用 包围每个表格。 {table}，然后将其放入表格行中。

预先非常感谢。我已经问过 Google，但它就是什么也没说 ^^ StackOverflow 到目前为止也保持沉默

原文

I have following code:

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

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

Very unfortunately, a line break is inserted between these two tables. I have tried putting them both in a single span and setting the whitespace to nowrap, but at no avail. Please, could you tell me how I can simply put these elements in a single row, without setting the float attribute in CSS and without surrounding each table with a <td> {table} </td> and then putting this in a table row.

Thanks a lot in advance. I have asked Google, but it just wouldn't say anything ^^ StackOverflow remained silent so far, too

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

慈悲佛祖 2024-09-11 07:05:33

我找到了！

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

display: inline-table;

感谢内联，伙计们，非常感谢，但至少，内联表有效^^

希望我有所帮助......

I found it!

One has to use the following settings for both tables:

display: inline-table;

Thanks for the inline, guys, thanks a lot, but at least, inline-table works ^^

Hope I helped...

回复收藏 0 原文

谜兔 2024-09-11 07:05:33

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

According to the CSS box model :

margin values do not apply to table rows and table cells See:
http://www.w3.org/TR/CSS2/box.html#margin-properties
padding and border values do not apply to table rows but apply to
table cells See: http://www.w3.org/TR/CSS2/box.html#padding-properties

A quick fix is to add padding to the top of the table that you want to separate.

For example: 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;
    }

回复收藏 0 原文

虫児飞 2024-09-11 07:05:33

如果将表 1 向左浮动，而将表向右浮动会怎样？默认情况下，表格是“块”元素，因此您可以尝试使用display:inline。

回复收藏 0 原文

白云悠悠 2024-09-11 07:05:33

或者这个：

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

or this:

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

回复收藏 0 原文

丑疤怪 2024-09-11 07:05:33

table{display:inline;} 不起作用？

回复收藏 0 原文

暖伴 2024-09-11 07:05:33

更新：这个答案非常古老，今天已经存在新的、更好的技术。

原始内容：

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

我就是这样做的。简单，适用于所有浏览器，并且可以轻松适应周围的布局元素。为两个表提供适合其包含元素的宽度，并将它们都向左浮动。例如：

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

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

Update: This answer is very old, and new, better techniques exist today.

Original content:

You should use CSS for this, as it is a presentational issue. Why can't you use CSS?

This is how I'd do it. Simple, works in every browser and it easily adapts to surrouding layout elements. Give both tables a width that fits them in the containing element, and float both of them to the left. For example:

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

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

回复收藏 0 原文

野侃 2024-09-11 07:05:33

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

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

回复收藏 0 原文