Ho una tabella semplice che viene utilizzata per una casella di posta come segue:
<table border="1">
<tr>
<th>From</th>
<th>Subject</th>
<th>Date</th>
</tr>Come posso impostare la larghezza in modo che Da e Data siano il 15% della larghezza della pagina e il Soggetto sia il 70%. Voglio anche che la tabella occupi l'intera larghezza della pagina.
Risposte:
<table style="width: 100%">
<colgroup>
<col span="1" style="width: 15%;">
<col span="1" style="width: 70%;">
<col span="1" style="width: 15%;">
</colgroup>
<!-- Put <thead>, <tbody>, and <tr>'s here! -->
<tbody>
<tr>
<td style="background-color: #777">15%</td>
<td style="background-color: #aaa">70%</td>
<td style="background-color: #777">15%</td>
</tr>
</tbody>
</table>width attribute; sta usando a CSS *style* width, che è ciò che ha sostituito l'attributo width <col>. (nonostante il voto multiplo di quel commento !!)
span="1"è superfluo poiché 1 è l'impostazione predefinita.
HTML:
<table>
<thead>
<tr>
<th class="from">From</th>
<th class="subject">Subject</th>
<th class="date">Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>[from]</td>
<td>[subject]</td>
<td>[date]</td>
</tr>
</tbody>
</table>CSS:
table {
width: 100%;
border: 1px solid #000;
}
th.from, th.date {
width: 15%
}
th.subject {
width: 70%; /* Not necessary, since only 70% width remains */
}La migliore pratica è mantenere separati HTML e CSS per ridurre la duplicazione del codice e separare le preoccupazioni (HTML per struttura e semantica e CSS per presentazione).
Si noti che, affinché funzioni nelle versioni precedenti di Internet Explorer, potrebbe essere necessario assegnare alla tabella una larghezza specifica (ad esempio, 900px). Quel browser ha alcuni problemi nel rendering di un elemento con dimensioni percentuali se il suo wrapper non ha dimensioni esatte.
Usa il CSS sotto, la prima dichiarazione assicurerà che la tua tabella si attenga alle larghezze fornite (dovrai aggiungere le classi nel tuo HTML):
table{
table-layout:fixed;
}
th.from, th.date {
width: 15%;
}
th.subject{
width: 70%;
}table{table-layout:fixed};.from,.date{width:15%}è sufficiente. A meno che le classi non vengano utilizzate anche su altri elementi, la scrittura th.fromè ridondante e può essere abbreviata in giusto .from.
Modo alternativo con una sola classe mantenendo i tuoi stili in un file CSS, che funziona anche in IE7:
<table class="mytable">
<tr>
<th>From</th>
<th>Subject</th>
<th>Date</th>
</tr>
</table>
<style>
.mytable td, .mytable th { width:15%; }
.mytable td + td, .mytable th + th { width:70%; }
.mytable td + td + td, .mytable th + th + th { width:15%; }
</style>Più recentemente, puoi anche utilizzare il nth-child()selettore da CSS3 (IE9 +), dove hai appena inserito il nr. della rispettiva colonna tra parentesi invece di metterle insieme al selettore adiacente. In questo modo, ad esempio:
<style>
.mytable tr > *:nth-child(1) { width:15%; }
.mytable tr > *:nth-child(2) { width:70%; }
.mytable tr > *:nth-child(3) { width:15%; }
</style>:nth-childsoluzione proposta è orribile in termini di prestazioni. Non vi è alcun motivo valido per usarlo (specialmente con il selettore universale) in questo esempio in cui ci sono solo tre elementi ( tho col) per lo stile. Inoltre, devi solo impostare la larghezza thsulla prima riga. Il .mytable tdprimo esempio è ridondante.
tre quindi se appartengono .mytable. Se davvero si vuole usare "ennesima", quindi qualcosa di simile a questo sarà probabilmente molto meglio: .mytable th:nth-of-type(1) {width: 15%}; .mytable th:nth-of-type(2) {width: 70%};. Non è inoltre necessario specificare la larghezza della terza colonna in questo caso.
.mytable th+th{width: 70%}.mytable th+th+th{width:15%}. Gli stessi "selettori" possono essere molto utili, ma in questo caso particolare (una piccola tabella con solo 3 colonne) non è realmente necessaria. Quando si utilizza table-layout: fixedsi può anche fare proprio questo: table{table-layout:fixed}th:first-child+th{width:70%}.
Questi sono i miei due suggerimenti.
Utilizzando le classi. Non è necessario specificare la larghezza delle altre due colonne poiché verranno impostate automaticamente al 15% ciascuna dal browser.
table { table-layout: fixed; }
.subject { width: 70%; } <table>
<tr>
<th>From</th>
<th class="subject">Subject</th>
<th>Date</th>
</tr>
</table>Senza usare le classi. Tre metodi diversi ma il risultato è identico.
un)
table { table-layout: fixed; }
th+th { width: 70%; }
th+th+th { width: 15%; } <table>
<tr>
<th>From</th>
<th>Subject</th>
<th>Date</th>
</tr>
</table>b)
table { table-layout: fixed; }
th:nth-of-type(2) { width: 70%; } <table>
<tr>
<th>From</th>
<th>Subject</th>
<th>Date</th>
</tr>
</table>c) Questo è il mio preferito. Come b) ma con un migliore supporto del browser.
table { table-layout: fixed; }
th:first-child+th { width: 70%; } <table>
<tr>
<th>From</th>
<th>Subject</th>
<th>Date</th>
</tr>
</table>A seconda del tuo corpo (o del div che sta avvolgendo il tuo tavolo) "impostazioni" dovresti essere in grado di fare questo:
body {
width: 98%;
}
table {
width: 100%;
}
th {
border: 1px solid black;
}
th.From, th.Date {
width: 15%;
}
th.Date {
width: 70%;
}
<table>
<thead>
<tr>
<th class="From">From</th>
<th class="Subject">Subject</th>
<th class="Date">Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Me</td>
<td>Your question</td>
<td>5/30/2009 2:41:40 AM UTC</td>
</tr>
</tbody>
</table> table { table-layout: fixed; }
.subject { width: 70%; } <table>
<tr>
<th>From</th>
<th class="subject">Subject</th>
<th>Date</th>
</tr>
</table><table>
<col width="130">
<col width="80">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>Prova questo invece.
<table style="width: 100%">
<tr>
<th style="width: 20%">
column 1
</th>
<th style="width: 40%">
column 2
</th>
<th style="width: 40%">
column 3
</th>
</tr>
<tr>
<td style="width: 20%">
value 1
</td>
<td style="width: 40%">
value 2
</td>
<td style="width: 40%">
value 3
</td>
</tr>
</table>Non usare l'attributo border, usa CSS per tutte le tue esigenze di stile.
<table style="border:1px; width:100%;">
<tr>
<th style="width:15%;">From</th>
<th style="width:70%;">Subject</th>
<th style="width:15%;">Date</th>
</tr>
... rest of the table code...
</table>Ma incorporare CSS in questo modo è una pratica inadeguata: si dovrebbero invece usare le classi CSS e inserire le regole CSS in un file CSS esterno.
Ecco un altro modo minimo per farlo nei CSS che funziona anche nei browser più vecchi che non supportano :nth-childe selettori simili: http://jsfiddle.net/3wZWt/ .
HTML:
<table>
<tr>
<th>From</th>
<th>Subject</th>
<th>Date</th>
</tr>
<tr>
<td>Dmitriy</td>
<td>Learning CSS</td>
<td>7/5/2014</td>
</tr>
</table>CSS:
table {
border-collapse: collapse;
width: 100%;
}
tr > * {
border: 1px solid #000;
}
tr > th + th {
width: 70%;
}
tr > th + th + th {
width: 15%;
}Aggiungi colgroup dopo il tag della tabella. Definisci qui la larghezza e il numero della colonna. e aggiungi il tag tbody. Metti la tua tr all'interno del corpo.
<table>
<colgroup>
<col span="1" style="width: 30%;">
<col span="1" style="width: 70%;">
</colgroup>
<tbody>
<tr>
<td>First column</td>
<td>Second column</td>
</tr>
</tbody>
</table>style="column-width:300px;white-space: normal;"