Question

我有一个视图，其中两个表必须在视觉上组合在一起。第一个表有1行，第二个表有多行。问题是显示第一个表（宽度：~3000px，所有tds）换行后，第二个显示在新行上，而不是内联。

我的代码如下：

  <div style="display:inline-block;">
    <table>
        <tr>
        //a lot of td 
        </tr>
    </table>
  </div>

  <div style="display:inline-block;">
    <table>
        <tr>
           <td></td><td></td><td></td>
        </tr>
        <tr>
           <td></td><td></td><td></td>
        </tr>
        //and so on
    </table>
  </div>

Answer 1

请参阅下面的代码和评论。

＆＃13;

section {
  font-size: 0; /* avoid whitespace between inline-block children */
  white-space: nowrap; /* prevent wrapping to new line */
}
section div {
  display: inline-block;
  font-size: 16px; /* re-set font-size here to whatever you need */
}

＆＃13;

<section>
  <div>
    <table>
      <tr>
        <td><img src="http://placekitten.com/3000/200" /></td>
      </tr>
    </table>
  </div>

  <div>
    <table>
      <tr>
        <td>Row 1</td>
      </tr>
      <tr>
        <td>Row 2</td>
      </tr>
    </table>
  </div>
</section>

＆＃13;

两个没有换行符的内联表

1 个答案: