Gleiche Breite für Tabellenspalten in äußeren und inneren Tabelle

Question

Ich habe eine äußere Tabelle, die alle Header-Namen und mehrere innere Tabellen mit allen Daten enthält. Jetzt möchte ich die Spaltenbreite des äußeren und inneren Tisches ausrichten. Grundsätzlich meine HTML sieht wie folgt aus:

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

Sie eine Demonstration in diesem fiddle sehen können.

Ich weiß, dass es eine seltsame Tabellenstruktur ist, aber ich muss es so halten, weil ich eine JavaScript-Bibliothek verwende, die diese Art von Struktur benötigt. Sie können sehen, dass die äußere und die innere Tabelle für jede Spalte dieselben Breiteneigenschaften haben, aber dennoch völlig anders aussehen. Die erste Zeile benötigt nicht 100% Breite, aber alle anderen Zeilen. Was muss ich tun, um einen "normalen" Tisch-Look zu bekommen?

aktualisieren

Ich glaube, ich muss nur prozentuale Breite Anweisungen verwenden. Aktualisiert Geige: https://jsfiddle.net/o546s8g3/3/

Answer 1

ich Ihre jsfiddle für Sie aktualisiert, Sie 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 

> Einige Text Tabelle

Grundsätzlich überprüfen, es ist nur einige Berechnungen, die Sie tun müssen, um alles zu machen ausgerichtet