Verschachtelte Tabellenausrichtung mit prozentualer Breite

-1

Hier habe ich eine verschachtelte formatierte Tabelle. jeder Tabellenzeilenkopf hat dieselbe gleiche Breite der geschachtelten Tabellenspaltenbreite. Wenn ich ein Padding oder einen Rand hinzugefügt habe, wird die Tabellenzelle kollabiert. Wie man jede der Spalten in gleicher Breite mit wechselnden ändert.Verschachtelte Tabellenausrichtung mit prozentualer Breite

Hier den Code unten:

table { 
 
    table-layout: fixed; 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
} 
 
td, 
 
th { 
 
    border: 1px solid #000; 
 
    padding: 0; 
 
}

<table> 
 
    <tr> 
 
    <th width="20%">Head1</th> 
 
    <th width="20%">Head2</th> 
 
    <th width="20%">Head3</th> 
 
    <th width="20%">Head1</th> 
 
    <th width="20%">Head2</th> 
 
    </tr> 
 
</table> 
 
<table> 
 
    <tr> 
 
    <td colspan="5"> 
 
     <table> 
 
     <tr> 
 
      <td>data1</td> 
 
      <td>data2</td> 
 
      <td>equa3</td> 
 
      <td>data2</td> 
 
      <td>equa3</td> 
 
     </tr> 
 
     <tr> 
 
      <td colspan=5 "><table> 
 
     <tr> 
 
     <td>data1</td> 
 
     <td>data2</td> 
 
     <td>equa3</td> 
 
     \t <td>data2</td> 
 
     <td>equa3</td> 
 
    </tr> 
 
    
 
    </table></td></tr> 
 
    </table></td> 
 
    </tr> 
 
    </table>

Irgendwelche Vorschläge:

Quelle

2016-08-01 bala

Sie haben nicht eine verschachtelte Tabelle benötigen, die verschachtelte Tabelle haben die gleiche Anzahl von Spalten als die primäre Tabelle, so dass Sie es nicht brauchen. –

Danke für die Antwort. Ich möchte etwas Textinhalt der einzelnen Tabelleninhalte hinzufügen. Wenn Sie einen Inhalt hinzufügen, erhöht sich die Breite der Tabellenspalte. Ich brauche die gleiche Breite der Tabellenspalte. – bala

Sie haben 5 Spalten in der Haupttabelle und 5 Spalten in der geschachtelten Tabelle. ** Sie benötigen diese geschachtelte Tabelle nicht **, sie hat die gleiche Anzahl an Spalten wie die Haupttabelle. Das habe ich im ersten Kommentar gesagt. –

Verwendung dieser Art von Struktur, warum Denn wenn Aufzeichnungen mehr, dass Ihre Erwartung, dann müssen Sie Scrollbar .Auf dieser Zeit nicht in der Lage Ihre Tabellenstruktur gegeben einer Struktur supports.I nur folgen seine adaequat in jeder Umgebung, aber schließlich nach Ihrer Tabellenstruktur ist es nicht möglich.

table,tr,th,td{ 
 
border:1px solid; 
 
    border-collapse:collapse; 
 
} 
 
.header{ 
 
position:relative; 
 
display:inline-block; 
 
width:calc(100% - 17px); 
 
width:-webkit-calc(100% - 17px); 
 
width:-moz-calc(100% - 17px); 
 
}

<div class="header"> 
 
<table width="100%"> 
 
    <tr height="25"> 
 
    <th width="20%">Head1</th> 
 
    <th width="20%">Head2</th> 
 
    <th width="20%">Head3</th> 
 
    <th width="20%">Head4</th> 
 
    <th width="20%">Head5</th> 
 
    </tr> 
 
</table> 
 
</div> 
 
<div style="width:100%; height:200px; overflow:auto;"> 
 
<table width="100%"> 
 
    <tr height="50"> 
 
    <td width="20%"> </td> 
 
    <td width="20%"> </td> 
 
    <td width="20%"> </td> 
 
    <td width="20%"> </td> 
 
    <td width="20%"> </td> 
 
    </tr> 
 
    <tr height="50"> 
 
    <td> </td> 
 
    <td> </td> 
 
    <td> </td> 
 
    <td> </td> 
 
    <td> </td> 
 
    </tr> 
 
    <tr height="50"> 
 
    <td> </td> 
 
    <td> </td> 
 
    <td> </td> 
 
    <td> </td> 
 
    <td> </td> 
 
    </tr> 
 
    <tr height="50"> 
 
    <td> </td> 
 
    <td> </td> 
 
    <td> </td> 
 
    <td> </td> 
 
    <td> </td> 
 
    </tr> 
 
    <tr height="50"> 
 
    <td> </td> 
 
    <td> </td> 
 
    <td> </td> 
 
    <td> </td> 
 
    <td> </td> 
 
    </tr> 
 
    <tr height="50"> 
 
    <td> </td> 
 
    <td> </td> 
 
    <td> </td> 
 
    <td> </td> 
 
    <td> </td> 
 
    </tr> 
 
</table> 
 
</div>

Quelle

2016-10-05 09:12:41

Das ist, was ich benötigt habe. Vielen Dank – bala

Sie die mit in der CSS in Ihrem th Feld hinzufügen müssen auf diese Weise beide Tabellen die teilen sich gleiche Breite Attribut.

td,th { border: 1px solid #000; padding: 0; width: 20%; }

Quelle

2016-10-04 07:17:16

Verschachtelte Tabellenausrichtung mit prozentualer Breite

Antwort

Verwandte Themen