J'ai un tableau simple qui est utilisé pour une boîte de réception comme suit:
<table border="1">
<tr>
<th>From</th>
<th>Subject</th>
<th>Date</th>
</tr>Comment définir la largeur de sorte que le début et la date représentent 15% de la largeur de la page et que le sujet soit 70%. Je veux également que le tableau occupe toute la largeur de la page.
Réponses:
<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; il utilise a CSS *style* width, ce qui a remplacé l'attribut width <col>. (malgré les multiples votes positifs de ce commentaire !!)
span="1"est superflu puisque 1 est la valeur par défaut.
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 meilleure pratique consiste à garder votre HTML et CSS séparés pour moins de duplication de code et pour la séparation des préoccupations (HTML pour la structure et la sémantique et CSS pour la présentation).
Notez que, pour que cela fonctionne dans les anciennes versions d'Internet Explorer, vous devrez peut-être donner à votre table une largeur spécifique (par exemple, 900 px). Ce navigateur a quelques problèmes pour rendre un élément avec des dimensions en pourcentage si son wrapper n'a pas de dimensions exactes.
Utilisez le CSS ci-dessous, la première déclaration garantira que votre table respecte les largeurs que vous fournissez (vous devrez ajouter les classes dans votre HTML):
table{
table-layout:fixed;
}
th.from, th.date {
width: 15%;
}
th.subject{
width: 70%;
}table{table-layout:fixed};.from,.date{width:15%}suffit donc. À moins que les classes ne soient également utilisées sur d'autres éléments, l'écriture th.fromest redondante et peut être réduite à juste .from.
Autre moyen avec une seule classe tout en conservant vos styles dans un fichier CSS, qui fonctionne même dans 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>Plus récemment, vous pouvez également utiliser le nth-child()sélecteur de CSS3 (IE9 +), où vous venez de mettre le nr. de la colonne respective entre parenthèses au lieu de les enchaîner avec le sélecteur adjacent. Comme ça, par exemple:
<style>
.mytable tr > *:nth-child(1) { width:15%; }
.mytable tr > *:nth-child(2) { width:70%; }
.mytable tr > *:nth-child(3) { width:15%; }
</style>:nth-childsolution proposée est horrible en termes de performances. Il n'y a aucune raison valable de l'utiliser (en particulier avec le sélecteur universel) dans cet exemple où il n'y a que trois éléments ( thou col) à styliser. De plus, il vous suffit de définir la largeur sur thla première ligne. Le .mytable tdpremier exemple est redondant.
tret ensuite s'ils appartiennent à .mytable. Si vous voulez vraiment utiliser « nième » alors quelque chose comme ceci sera probablement beaucoup mieux: .mytable th:nth-of-type(1) {width: 15%}; .mytable th:nth-of-type(2) {width: 70%};. Il n'est également pas nécessaire de spécifier la troisième largeur de colonne dans ce cas.
.mytable th+th{width: 70%}.mytable th+th+th{width:15%}. Les "nième" sélecteurs eux-mêmes peuvent être très utiles mais dans ce cas particulier (un petit tableau avec seulement 3 colonnes) ne sont pas vraiment nécessaires. Lors de l' utilisation , table-layout: fixedvous pouvez même faire ceci: table{table-layout:fixed}th:first-child+th{width:70%}.
Ce sont mes deux suggestions.
Utilisation des classes. Il n'est pas nécessaire de spécifier la largeur des deux autres colonnes car elles seront définies automatiquement à 15% par le navigateur.
table { table-layout: fixed; }
.subject { width: 70%; } <table>
<tr>
<th>From</th>
<th class="subject">Subject</th>
<th>Date</th>
</tr>
</table>Sans utiliser de cours. Trois méthodes différentes mais le résultat est identique.
une)
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) Celui-ci est mon préféré. Identique à b) mais avec une meilleure prise en charge du navigateur.
table { table-layout: fixed; }
th:first-child+th { width: 70%; } <table>
<tr>
<th>From</th>
<th>Subject</th>
<th>Date</th>
</tr>
</table>En fonction de votre corps (ou de la div qui enveloppe votre table) les "paramètres", vous devriez pouvoir faire ceci:
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>Essayez ceci à la place.
<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>N'utilisez pas l'attribut border, utilisez CSS pour tous vos besoins de style.
<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>Mais l'incorporation de CSS comme ça est une mauvaise pratique - il faut utiliser des classes CSS à la place et mettre les règles CSS dans un fichier CSS externe.
Voici une autre façon minimale de le faire en CSS qui fonctionne même dans les anciens navigateurs qui ne prennent pas en charge :nth-childet les sélecteurs similaires: 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%;
}Ajoutez colgroup après votre balise de table. Définissez ici la largeur et le nombre de colonnes. et ajoutez la balise tbody. Mettez votre tr à l'intérieur du corps.
<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;"