单行和垂直对齐的文字和表

Question

我正在尝试将文本和表格放在另一个表格单元格中，并将它们放在一行并垂直对齐。

基本上这段代码：

<table>
  <tr>
    <td>
      text:
      <table>
        <tr>
          <td>a</td>
          <td>b</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

得出这个结果：

text: a b

小提琴：https://jsfiddle.net/3uxcn5pz/

----停止在这里阅读以避免绝望的非GUI程序员哭泣-----

我正在尝试空间包装，浮动，显示，线高等。 但是，在我需要建造太空火箭引导模块的时候，我似乎无法完成这个简单的事情。相反，我觉得html + CSS是否会折磨无辜的程序员（如果这还不够 - 抛出Javascript混合）

Answer 1

将两个表都设置为display: inline-table并使用vertical-align属性。

fiddle

＆＃13;

＆＃13;

table {
  display: inline-table;
}

td {
  vertical-align: text-bottom;
}

＆＃13;

<table>
  <tr>
    <td>
      text:
      <table>
        <tr>
          <td>a</td>
          <td>b</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

<br/>
<br/>
<table>
  <tr>
    <td>
      text:
      <table>
        <tr>
          <td>a</td>
          <td>b</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;