Splitting eine Tabellenzelle in zwei Spalten in HTML

Ich habe die folgende Tabelle:Splitting eine Tabellenzelle in zwei Spalten in HTML

<table border="1"> 
    <tr> 
    <th scope="col">Header</th> 
    <th scope="col">Header</th> 
    <th scope="col">Header</th> 
    </tr> 
    <tr> 
    <th scope="row">&nbsp;</th> 
    <td>&nbsp;</td> 
    <td>Split this one into two columns</td> 
    </tr> 
</table>

Und ich wünschte, um die Zelle zu spalten, die „Split diesen in zwei Spalten“ in zwei Zellen/Spalten enthält. Wie gehe ich vor?

Fiddle

Quelle

2013-10-01 user1038814

definieren „in zwei Spalten split“. Welche Spalten? Wenn Sie meinen, dass Sie der Tabelle eine Spalte hinzufügen und einen Teil des Zelleninhalts in die neue Spalte verschieben möchten, was könnte dann das Problem sein? Fügen Sie einfach die Spalte hinzu, indem Sie jeder Zeile eine Zelle hinzufügen. –

Gefallen Sie diesen http://jsfiddle.net/8ha9e/1/

hinzufügen colspan="2" zum 3. <th> und haben dann 4 <td> ‚s in Ihrer zweiten Reihe.

<table border="1"> 
    <tr> 
    <th scope="col">Header</th> 
    <th scope="col">Header</th> 
    <th scope="col" colspan="2">Header</th> 
    </tr> 
    <tr> 
    <th scope="row">&nbsp;</th> 
    <td>&nbsp;</td> 
    <!-- The following two cells will appear under the same header --> 
    <td>Col 1</td> 
    <td>Col 2</td> 
    </tr> 
</table>

Quelle

2013-10-01 11:59:22 MrMisterMan

Ändern der <td> aufgeteilt werden wie folgt aussehen:

<td><table><tr><td>split 1</td><td>split 2</td></tr></table></td>

Quelle

2013-10-01 11:59:58 cameronjonesweb

Sie haben zwei Möglichkeiten.

Verwenden Sie eine zusätzliche Spalte in der Kopfzeile und verwenden Sie <colspan> in Ihrer Kopfzeile, um eine Zelle für zwei oder mehr Spalten zu strecken.
Legen Sie eine <table> mit 2 Spalten innerhalb des td Sie in zusätzlichen Spalten wollen.

Quelle

2013-10-01 12:00:13

ist, dass, was Sie suchen?

<table border="1"> 
<tr> 
<th scope="col">Header</th> 
<th scope="col">Header</th> 
<th scope="col" colspan="2">Header</th> 
</tr> 
<tr> 
<th scope="row">&nbsp;</th> 
<td>&nbsp;</td> 
<td>Split this one</td> 
<td>into two columns</td> 
</tr> 
</table>

Quelle

2013-10-01 12:02:19 GMZ

Mit diesem Beispiel können Sie mit dem Attribut colspan

<TABLE BORDER> 
    <TR> 
     <TD>Item 1</TD> 
     <TD>Item 1</TD> 
     <TD COLSPAN=2>Item 2</TD> 
    </TR> 
    <TR> 
     <TD>Item 3</TD> 
     <TD>Item 3</TD> 
     <TD>Item 4</TD> 
     <TD>Item 5</TD> 
    </TR> 
</TABLE>

Weitere Beispiele bei http://hypermedia.univ-paris8.fr/jean/internet/ex_table.html gespalten.

Quelle

2013-10-01 12:03:13

das Problem mit diesem ist, wie sortiere ich die beiden tds beim Klicken auf den Tabellenkopf, – PirateApp

Bitte versuchen Sie den folgenden Weg.

<table> 
    <tr> 
    <th>Month</th> 
    <th>Savings</th> 
    </tr> 
    <tr> 
    <td>January</td> 
    <td>$100</td> 
    </tr> 
    <tr> 
    <td>February</td> 
    <td>$80</td> 
    </tr> 
    <tr> 
    <td colspan="2">Sum: $180</td> 
    </tr> 
</table>

Quelle

2017-07-06 09:00:15

Ich kam hier für ein ähnliches Problem, das ich mit meinen Tabellenköpfen konfrontiert wurde.

@ MrMisterMan's Antwort, sowie andere, waren wirklich hilfreich, aber die Grenzen waren mein Spiel zu schlagen. Also, ich habe einige Nachforschungen gemacht, um die Verwendung rowspan zu finden.

Hier ist, was ich getan habe und ich denke, es könnte anderen helfen, etwas ähnliches gegenüberzustellen.

<table style="width: 100%; margin-top: 10px; font-size: 0.8em;" border="1px"> 
 
    <tr align="center" > 
 
     <th style="padding:2.5px; width: 10%;" rowspan="2">Item No</th> 
 
     <th style="padding:2.5px; width: 55%;" rowspan="2">DESCRIPTION</th> 
 
     <th style="padding:2.5px;" rowspan="2">Quantity</th> 
 
     <th style="padding:2.5px;" colspan="2">Rate per Item</th> 
 
     <th style="padding:2.5px;" colspan="2">AMOUNT</th> 
 
    </tr> 
 
    <tr> 
 
     <th>Rs.</th> 
 
     <th>P.</th> 
 
     <th>Rs.</th> 
 
     <th>P.</th> 
 
    </tr> 
 
</table>

Quelle

2017-10-15 05:41:11 lU5er

Splitting eine Tabellenzelle in zwei Spalten in HTML

Antwort

Verwandte Themen