単列と垂直に配置されたテキストとテーブル

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プログラマの叫びを避けるために、ここで読むのを止め-----

私はスペースラップ、フローティング、ディスプレイ、ラインの高さを試していますs等 しかし、私はこの簡単なことを私が空間ロケット誘導モジュールを構築する必要がある時に達成することはできません。代わりに、私はHTML + CSSのように無実のプログラマーを拷問する（と十分ではない - 混乱にJavascriptをスロー）

Answer 1

両方のテーブルをに設定し、vertical-alignプロパティを使用してください。

fiddle

table { 
 
    display: inline-table; 
 
} 
 

 
td { 
 
    vertical-align: text-bottom; 
 
}

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