Question

我有2个表，我试图在同一个HTML页面上对齐。两张表的总宽度在1800px的范围内 - 这是我头疼的原因之一。

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

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

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

我真的需要强制这些表到同一行，因为在任何其他配置中信息都是荒谬的。

我尝试过使用：

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

但没有运气。

理想情况下，表2（最右边的一个）会调整大小，但与表1保持同一条线。有没有办法实现这一目标？

提前感谢您的帮助！

Answer 1

您可以在父级上使用空格来强制它们保持在同一条线上：http://codepen.io/mbrillaud/pen/bNXPgg

div{
    white-space: nowrap;
}

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

Answer 2

您可以使用calc函数将一个表格设为固定高度，另一个表格填充屏幕的其余部分。

注意

如果表已被赋予display: inline-block属性

，则此方法有效

＆＃13;

html,
body {
  margin: 0;
  padding: 0;
}
table {
  display: inline-block;
}
#one {
  width: 400px;
  background: tomato;
}
#two {
  width: -webkit-calc(100% - 405px);
  width: calc(100% - 405px);
  background: cornflowerblue;
}

＆＃13;

<table id="one">
  <tr>
    <th>Header to table with fixed width</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
</table>

<table id="two">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
</table>

＆＃13;

Answer 3

您可能想尝试使用Flexbox。有关如何使用的详细信息，请访问：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

在您的情况下，使用单个容器div将两个表作为项目，将flex-wrap属性设置为nowrap可以实现您的目标。此外，flexbox是多平台友好的。

Answer 4

使用单个表格，每个旧表格的内容位于新表格的两个不同列中。

请记住，不再推荐使用表格，最好使用div：

<div style="width:1800px;">
    <div style="float:left;">..content goes here..</div>
    <div style="float:left;">..content goes here..</div>
</div>

Answer 5

使用样式 - ＆gt; display：flex for main div。对于宽度未知的表使用style flex，这将使表在单行（内联）中对齐。 http://codepen.io/saig/pen/LEwwyZ

    div{
      display:flex;
    }
    #fixed_width{
      width: 80%; /** fixed width table: make sure you give enough width for other table to display, though flex style take care of auto width adjustment */
    }
    #variable_width{
      -webkit-flex: 0.5;
      -ms-flex: 1;
      flex: 0.5;
    }

强制2个表到HTML / CSS中的同一行

5 个答案: