强制2个表格在HTML / CSS中的同一行 [英] Forcing 2 tables to the same line in HTML/CSS

问题描述

我有两个表格，我试图在HTML页面的相同位置对齐。
这两个表的总宽度在1800px的区域 - 这是我头痛的原因之一。

我的CSS文件的当前状态如下所示：

  .inline 
 {
 display：inline-table; 
 vertical-align：bottom; 
 
  

将这个样式应用于两个表格可以使它们对齐 - 但仅 当显示它们的页面的总宽度大于它们的总宽度时。

我真的需要强制这些表位于同一行，因为这些信息在任何其他配置中都是无意义的。

我试过使用：

 < div width = 2000像素 > [表1] [表2]< / DIV> 
  

但是没有运气。

理想情况下，表2（最右边的一个）将调整大小，但与表1保持一致。是否有任何方法可以实现这一目标？

感谢您的帮助！ 解决方案

您可以使用空格父母强迫他们留在同一行： http://codepen.io/mbrillaud/pen/bNXPgg

  div {
 white-space：nowrap; 
} 
  

编辑：糟糕，添加了正确的链接

I have 2 tables that I'm trying to get to align on the same bit of HTML page. The sum width of both tables is somewhere in the region of 1800px - which is one of the reasons for my headache.

The current state of my CSS file is as follows:

.inline
{
    display:inline-table;
    vertical-align:bottom;
}

Applying this style to both tables gets them to align - but ONLY when the total width of the page displaying them is larger than their sum width.

I really need to force these tables to the same line, since the information is nonsensical in any other configuration.

I've tried using:

<div width="2000px">[table1][table2]</div>

But no luck.

Ideally, table 2 (the right-most one) would resize but stay on the same line as table 1. Is there any way to achieve this?

Thanks in advance for your help!

解决方案

You can use white-space on the parent to force them to stay on the same line: http://codepen.io/mbrillaud/pen/bNXPgg

div{
    white-space: nowrap;
}

Edit: Oops, added the right link

这篇关于强制2个表格在HTML / CSS中的同一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！