Mit dem untenstehenden Code, ich bekomme die Spalten Größe ist anders (esp die letzte Spalte ist klein) Ich möchte alle drei Spalten, um von gleicher Größe zu sein.Thanks.HTML-Tabelle Spalte von gleicher Größe

<html> 
<body> 
<h4>Two rows and three columns:</h4> 
<table border="1" width="100%" height="400" align="top"> 
<tr style="height: 1"> 
    <td> 
    <table width="100%" border="2" height ="100" align="top"> 
    <tr> 
     <td>1-1</td> 
     <td>1-2</td> 
    </tr> 
    <tr> 
     <td>1-3</td> 
     <td>1-4</td> 
    </tr> 
    </table> 
</td> 
    <td> 
    <table width="100%" border="2" height ="100" align="top"> 
    <tr> 
     <td>2-1</td> 
     <td>2-2</td> 
    </tr> 
    <tr> 
     <td>2-3</td> 
     <td>2-4</td> 
    </tr> 
    </table> 
<td> 
    <table width="100%" border="2" height ="100" align="top"> 
    <tr> 
     <td>3-1</td> 
    </tr> 
    <tr>  
     <td>3-2</td> 
    </tr> 
    </table> 
</td> 
</tr> 
<tr style="vertical-align: top"> 
</td> 
    <td> 
    <table width="100%" border="2" height ="100"> 
    <tr> 
     <td>4-1</td> 
     <td>4-2</td> 
    </tr> 
    <tr> 
     <td>4-3</td> 
     <td>4-4</td> 
    </tr> 
</table> 
<td> 
    <table width="100%" border="2" height ="100"> 
    <tr> 
     <td>5-1</td> 
     <td>5-2</td> 
    </tr> 
    <tr> 
     <td>5-3</td> 
     <td>5-4</td> 
    </tr> 
    </table> 
<td> 
    <table width="100%" border="2" height ="100"> 
    <tr> 
     <td>6-1</td> 
    </tr> 
    <tr> 
     <td>6-3</td> 
    </tr> 
    </table> 
</body> 
</html>

2012-03-25 m4n07

Haben Sie versucht, die Breite auf der Wurzel zu betrachten 'td' Spalten zu definieren? – home

Was bedeutet 'style =" height: 1 "? –

style = "Höhe: 1" wird nicht funktionieren. nur 0 darf ohne Einheit sein –

Legen Sie eine colgroup Element in der Tabelle:

<table> 
    <colgroup> 
    <col style="width: 33%" /> 
    <col style="width: 33%" /> 
    <col style="width: 33%" /> 
    </colgroup> 
    <tr> 
... 
    </tr> 
</table>

Quelle

2012-03-25 16:04:07 Sirko

Danke, es funktioniert. – m4n07

Das funktioniert also nur für 3 Spalten? Wenn ich mehr Spalten haben möchte, wie geht das dann? – m4n07

@ m4n07 dies funktioniert für jede Anzahl von Spalten. Fügen Sie einfach für jede benötigte Spalte ein "col" hinzu und passen Sie die Breite entsprechend an. – Sirko

Nur jeder <td> der ersten Ebene Tabelle auf width="33%"

Quelle

2012-03-25 16:03:21

Sie könnten versuchen, Ihre die Breite der Spalten einstellen zu absolut, statt relativ:

< TD WIDTH=200>

Versuchen Sie, diese link zu betrachten.

Quelle

2012-03-25 16:06:54 theJollySin

-2

Eine Alternative besteht darin, die CSS-Breite der Tabelle auf 100% zu setzen, z.

table { width:100% }

Die Zellen sollten dies erben und von gleicher Größe sein. Auf diese Weise sind Sie flexibler für unterschiedliche Spaltenzahlen.

Quelle

2015-02-12 13:58:12 Zemogle

paar Fixes

<table style="table-layout: fixed; width: 100%;"> <!- set table layout to fixed and width to full width --> 
    <colgroup> 
     <col style="width: auto" /> <!- takes the remaining space --> 
     <col style="width: 33.3333%" /> <!- or use 33.3333% for all instead if you want to occupy full width --> 
     <col style="width: 33.3333%" /> 
    </colgroup> 
    <tr> 
     <td>...</td> 
     <td>...</td> 
     <td>...</td> 
    </tr> 
    ... 
</table>

Quelle

2016-12-08 10:13:17 DevWL

HTML-Tabelle Spalte von gleicher Größe

Antwort

paar Fixes

Verwandte Themen