Tabela HTML: procent szerokości kolumny

Question

Mam tabelę z 7 kolumnami. Chcę kolumny aby być następujących szerokościach:

• 3 kolumny x width=20%
• 4 kolumny x width=10%

Stworzyłem 2 klas CSS, po jednej szerokości i jestem przypisując je do każda komórka.

To, co mam, a to nie działa, to jest to. Zamiast tego szerokość zawsze zawija treść. Jeśli po prostu wstawię jedną literę, niż szerokość będzie bardzo mała, jeśli wstawię duży ciąg, szerokość będzie zbyt duża. Chcę tego stałego.

CSS & HTML:

table { 
 
    width: 100%; 
 
} 
 
.ten { 
 
    width: 10% 
 
} 
 
.twenty { 
 
    width: 20%; 
 
}

<table> 
 
    <tr> 
 
    <th class="ten">H1</th> 
 
    <th class="ten">H2</th> 
 
    <th class="ten">H3</th> 
 
    <th class="twenty">H4</th> 
 
    <th class="twenty">H5</th> 
 
    <th class="twenty">H6</th> 
 
    <th class="ten">H7</th> 
 
    </tr> 
 

 
    <tr> 
 
    <td class="ten">A1</td> 
 
    <td class="ten">A2</td> 
 
    <td class="ten">A3</td> 
 
    <td class="twenty">A4</td> 
 
    <td class="twenty">A5</td> 
 
    <td class="twenty">A6</td> 
 
    <td class="ten">A7</td> 
 
    </tr> 
 

 
    <tr> 
 
    <td class="ten">B1</td> 
 
    <td class="ten">B2</td> 
 
    <td class="ten">B3</td> 
 
    <td class="twenty">B4</td> 
 
    <td class="twenty">B5</td> 
 
    <td class="twenty">B6</td> 
 
    <td class="ten">B7</td> 
 
    </tr> 
 

 
</table>

mógłby ktoś wytłumaczyć w jaki sposób osiągnąć to, co chcę?

Answer 1

Aby ustalić szerokość, można użyć table-layout:fixed;.

Możesz również użyć znaczników colgroup and col, aby przypisać do szerokości kolumny i bg.

table { 
 
    width: 100%; 
 
    table-layout: fixed; 
 
} 
 
.ten { 
 
    width: 10%; 
 
    background: tomato; 
 
} 
 
.twenty { 
 
    width: 20%; 
 
    background: turquoise 
 
} 
 
/* see me */ 
 
td { 
 
    border: solid; 
 
} 
 
/* play with bg cells and cols ? */ 
 

 
tr:nth-child(even) :nth-child(odd) { 
 
    background:rgba(100,255,50,0.3); 
 
    } 
 
tr:nth-child(odd) :nth-child(even) { 
 
    background:rgba(255,255,255,0.3); 
 
    }

<table> 
 
    <colgroup> 
 
    <col class="ten" /> 
 
    <col class="ten" /> 
 
    <col class="ten" /> 
 
    <col class="twenty" /> 
 
    <col class="twenty" /> 
 
    <col class="twenty" /> 
 
    <col class="ten" /> 
 
    </colgroup> 
 
    <tr> 
 
    <th>H1</th> 
 
    <th>H2</th> 
 
    <th>H3</th> 
 
    <th>H4</th> 
 
    <th>H5</th> 
 
    <th>H6</th> 
 
    <th>H7</th> 
 
    </tr> 
 

 
    <tr> 
 
    <td>A1</td> 
 
    <td>A2</td> 
 
    <td>A3</td> 
 
    <td>A4</td> 
 
    <td>A5</td> 
 
    <td>A6</td> 
 
    <td>A7</td> 
 
    </tr> 
 

 
    <tr> 
 
    <td>B1</td> 
 
    <td>B2</td> 
 
    <td>B3</td> 
 
    <td>B4</td> 
 
    <td>B5</td> 
 
    <td>B6</td> 
 
    <td>B7</td> 
 
    </tr> 
 
<tr> 
 
    <td>A1</td> 
 
    <td>A2</td> 
 
    <td>A3</td> 
 
    <td>A4</td> 
 
    <td>A5</td> 
 
    <td>A6</td> 
 
    <td>A7</td> 
 
    </tr> 
 

 
    <tr> 
 
    <td>B1</td> 
 
    <td>B2</td> 
 
    <td>B3</td> 
 
    <td>B4</td> 
 
    <td>B5</td> 
 
    <td>B6</td> 
 
    <td>B7</td> 
 
    </tr> 
 

 
</table>

Answer 2

Dodaj to do Twojego CSS

td { 
    word-break: break-all; 
    //or 
    word-wrap: break-word; 
} 

word-break: break-all; zawija długie wyrazy do następnej linii, ale zachowa pojedynczych słów cały

max-dimension 

staną

max- 
dimension 

Podczas word-wrap: break-word będzie odciąć słowo w dowolnym miejscu, o ile będzie pasowało do komórki.

max-dimension 

może stać

max-dim 
ension 

Answer 3

Twój CSS działa zgodnie z oczekiwaniami, w taki sposób, że szerokość głowic tabeli i komórki są prawidłowe. Jednak:

th domyślnie mają text-align: center applied, a element td nie ma.

Powinieneś dodać do td lub th ten sam wyrównanie tekstu. Np .:

th { 
    text-align: left; 
}