Ik heb een eenvoudige tabel die als volgt voor een inbox wordt gebruikt:
<table border="1">
<tr>
<th>From</th>
<th>Subject</th>
<th>Date</th>
</tr>
Hoe stel ik de breedte in zodat de Van en Datum 15% van de paginabreedte zijn en het Onderwerp 70%. Ik wil ook dat de tabel de hele paginabreedte inneemt.
Antwoord 1, autoriteit 100%
<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>Antwoord 2, autoriteit 32%
table {
width: 100%;
border: 1px solid #000;
}
th.from, th.date {
width: 15%
}
th.subject {
width: 70%; /* Not necessary, since only 70% width remains */
}<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>Antwoord 3, autoriteit 8%
Gebruik de onderstaande CSS, de eerste declaratie zorgt ervoor dat uw tabel zich houdt aan de breedtes die u opgeeft (u moet de klassen in uw HTML toevoegen):
table{
table-layout:fixed;
}
th.from, th.date {
width: 15%;
}
th.subject{
width: 70%;
}
Antwoord 4, autoriteit 4%
Alternatieve manier met slechts één klasse terwijl je je stijlen in een CSS-bestand houdt, dat zelfs werkt 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>
Meer recentelijk kunt u ook de nth-child()selector van CSS3 (IE9+) gebruiken, waar u gewoon het nr. van de respectieve kolom tussen haakjes in plaats van ze aan elkaar te rijgen met de aangrenzende selector. Zoals dit bijvoorbeeld:
<style>
.mytable tr > *:nth-child(1) { width:15%; }
.mytable tr > *:nth-child(2) { width:70%; }
.mytable tr > *:nth-child(3) { width:15%; }
</style>
Antwoord 5, autoriteit 3%
Dit zijn mijn twee suggesties.
-
Klassen gebruiken. Het is niet nodig om de breedte van de twee andere kolommen op te geven, omdat ze door de browser automatisch op 15% worden ingesteld.
table { table-layout: fixed; } .subject { width: 70%; }<table> <tr> <th>From</th> <th class="subject">Subject</th> <th>Date</th> </tr> </table>
Antwoord 6
Afhankelijk van je lichaam (of de div die je tabel omhult) ‘instellingen’ zou je dit moeten kunnen doen:
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>
Antwoord 7
table { table-layout: fixed; } .subject { width: 70%; }<table> <tr> <th>From</th> <th class="subject">Subject</th> <th>Date</th> </tr> </table>
Antwoord 8
<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>
Antwoord 9
Probeer dit in plaats daarvan.
<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>
Antwoord 10
Gebruik niet het border-kenmerk, maar gebruik CSS voor al uw stylingbehoeften.
<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>Maar het op deze manier insluiten van CSS is een slechte gewoonte – men zou in plaats daarvan CSS-klassen moeten gebruiken en de CSS-regels in een extern CSS-bestand moeten plaatsen.
Antwoord 11
Hier is nog een minimale manier om het in CSS te doen die zelfs werkt in oudere browsers die
:nth-childen dergelijke selectors niet ondersteunen: 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%; }
Antwoord 12
Voeg colgroup toe na uw tabeltag. Definieer hier de breedte en het aantal kolommen. en voeg de tbody-tag toe. Stop je tr in je lichaam.
<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>
Antwoord 13
style="column-width:300px;white-space: normal;"Other episodes