同じ幅

Question

私はすべてのヘッダー名、すべてのデータを有する複数の内部テーブルを含む外側のテーブルを持っています。今度は、外側テーブルと内側テーブルの列幅を揃えたい。基本的に私のHTMLは次のようになります。

<table> 
    <thead> 
    <tr> 
     <td>Header 1</td> 
     <td>Header 2</td> 
     <td>Header 3</td> 
     <td class="hide"></td> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td class="hide">Text for js library</td> 
     <td class="hide">Text for js library</td> 
     <td class="hide">Text for js library</td> 
     <td colspan="4"> 
     <table> 
      <tr> 
      <td>Actual text</td> 
      <td>Actual text</td> 
      <td>Actual text</td> 
      </tr> 
     </td> 
    </tr> 
    </tbody> 
</table> 

あなたはこのfiddleでデモを見ることができます。

私はそれが奇妙なテーブル構造であることを知っていますが、私はそのような構造が必要なjavascriptライブラリのためにそのようにしなければなりません。外側テーブルと内側テーブルは、それぞれの列の幅プロパティが同じであることがわかりますが、完全に異なって見えます。最初の行は何とか100％の幅を取るのではなく、他のすべての行が行います。 「通常の」表の外観を得るためには何が必要ですか？

更新

私はちょうどパーセント幅ステートメントを使用する必要がありますね。 更新フィドル：https://jsfiddle.net/o546s8g3/3/

Answer 1

私はあなたのためにjsfiddleを更新し、あなたはテーブル基本的

以下のいくつかのテキスト、あなたはすべてのものを作るために行う必要があり、そのちょうどいくつかの計算> https://jsfiddle.net/o546s8g3/5/

<table > 
    <thead> 
    <tr> 
     <td style="width:16.8%" >A</td> 
     <td style="width:16.7%">B</td> 
     <td style="width:16.7%">Lorem ipsum</td> 
     <td style="width:16.7%">Lorem ipsum</td> 
     <td style="width:16.7%">Lorem ipsum</td> 
     <td style="width:16.7%">Lorem ipsum</td> 
     <td class="hide ">se ipsum</td> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td class="hide">Lorem</td> 
     <td class="hide">Lorem ipsum</td> 
     <td class="hide">Lorem ipsum dolor sit amet</td> 
     <td class="hide">Lorem</td> 
     <td class="hide">Lorem</td> 
     <td class="hide">Lorem ipsum</td> 
     <td colspan="7"> 
     <table class="table"> 
      <tr> 
      <td>add ipsum dolor</td> 
      <td>Lorem ipsum</td> 
      <td>Lorem ipsum dolor sit amet</td> 
      <td>Lorem</td> 
      <td>Lorem</td> 
      <td>Lorem ipsum</td> 
      </tr> 
      <tr> 
      <td>Lorem</td> 
      <td>Lorem ipsum</td> 
      <td>Lorem ipsum dolor sit amet</td> 
      <td>Lorem</td> 
      <td>Lorem</td> 
      <td>Lorem ipsum</td> 
      </tr> 
     </table> 
     </td> 
    </tr> 
    <tr> 
     <td class="hide">dee</td> 
     <td class="hide">dee ipsum</td> 
     <td class="hide">Lorem ipsum dolor sit amet</td> 
     <td class="hide">Lorem</td> 
     <td class="hide">Lorem</td> 
     <td class="hide">Lorem ipsum</td> 
     <td colspan="7"> 
     <table> 
      <tr> 
      <td>Lorem</td> 
      <td>Lorem ipsum</td> 
      <td>Lorem ipsum dolor sit amet</td> 
      <td>Lorem</td> 
      <td>Lorem</td> 
      <td>Lorem ipsum</td> 
      </tr> 
     </table> 
     </td> 
    </tr> 
    </tbody> 
</table 

を確認することができます整列