html - 中間要素を含むテーブル レイアウトでの HTML CSS の問題

Question

問題を説明するためのフィドルがあります コードと css はフィドルで見ることができます。

フィドルリンク

添付の写真に示すように、単純な HTML 形式を作成しようとしています。

問題は「Loooong 説明」にあります - 「Loooong 説明」を追加するために「Number」テキストの下にスパンまたはパラを追加するとすぐに、親の css も変更され、「Number」はもう中央に残りません!

すべてのサイズは「%」である必要があることに注意してください。

<div id="opentickets" class="container">
        <table class="outer wordwrap">
            <col class="cola" />
            <col class="colb" />
            <tr class="top">    
             <td colSpan="2" class="heading">Top Row Text</td>          
            </tr>
            <tr class="middle">
              <td ></td>
              <td class="wordwrap">
                <div  class="content"><b class="number">Number</b>
                </div>                  
              </td>
            </tr>
            <tr class="bottom"> 
             <td ></td>
              <td class="wordwrap"> </td>       
            </tr>
        </table>            
 </div>

ps: 特定の側面 (表の中央に数字を配置し、幅 20% から開始するなど) を達成するために、このような表形式の形式を作成する必要がありました。