css - 两个没有换行符的内联表

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

请参阅下面的代码和注释。

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 */
}

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