J'ai une simple table qui est utilisée pour une boîte de réception comme suit:largeur de la colonne de table Réglage
<table border="1">
<tr>
<th>From</th>
<th>Subject</th>
<th>Date</th>
</tr>
Comment régler la largeur de sorte que la De et la date sont 15% de la largeur de la page et la Le sujet est 70%. Je veux aussi que la table prenne toute la largeur de la page.
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 est de garder votre HTML et CSS séparent moins la 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, 900px). Ce navigateur a quelques problèmes pour rendre un élément avec des dimensions en pourcentage si son encapsuleur n'a pas de dimensions exactes.
<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>nice et une solution simple. –
Où devrait-il être placé dans le DOM par rapport aux éléments ou Cela fonctionne-t-il pour HTML5? –
Zulu
En fonction de votre corps (ou la div qui est enveloppait votre table) 'paramètres', vous devriez être en mesure de le faire: N'utilisez pas l'attribut border, utilisez CSS pour tous vos besoins de style. Mais l'intégration CSS comme ça est une mauvaise pratique - on devrait utiliser des classes CSS à la place, et de mettre les règles CSS dans un fichier CSS externe. Je soupçonnerais que l'exemple de code de l'OP et de stackoverflowians utile était pour la lisibilité et la simplicité, en aucun cas un encouragement pour les styles en ligne. –
Tass
Utilisez le CSS ci-dessous, la première déclaration assurera vos bâtons de table à la largeur que vous fournissez (vous devrez ajouter les classes dans votre code HTML): Merci. Le bit "layout-table" a fait fonctionner le CSS. –
En fait, vous avez seulement besoin de spécifier la largeur des deux colonnes. Le troisième sera calculé automatiquement, donc «table {layout-table: fixed} ;. from, .date {width: 15%}» est suffisant. Si les classes ne sont pas utilisées sur d'autres éléments, l'écriture de 'th.from' est redondante et peut être raccourcie à' .from'. –
tomasz86
manière alternative avec un seul tandis que la classe garder vos styles dans un fichier CSS qui fonctionne même dans IE7: Plus récemment, vous pouvez également utiliser le sélecteur La solution ': nth-child' proposée est horrible en termes de performance. Il n'y a pas de raison valable de l'utiliser (en particulier avec le sélecteur universel) dans cet exemple où il n'y a que trois éléments ('th' ou' col') à styliser. De plus, il suffit de définir la largeur sur le 'th' de la première ligne. Le '.mytable td' dans le premier exemple est redondant. –
tomasz86
"La solution proposée: nth-child est horrible en termes de performance." - citation requise. –
DanMan
Cela devrait suffire: [Efficacement Rendering CSS] (https://css-tricks.com/efficiently-rendering-css/). Avec votre utilisation du sélecteur universel, le navigateur vérifie d'abord TOUS les éléments, qu'ils soient nième enfant d'un autre élément, puis si leur parent direct est 'tr' et ensuite s'ils appartiennent à' .mytable'. Si vous voulez vraiment utiliser "nth" alors quelque chose comme ça sera probablement beaucoup mieux: '.mytable th: nth-of-type (1) {largeur: 15%}; .mytable th: nth-of-type (2) {largeur: 70%}; '. Il n'est également pas nécessaire de spécifier la largeur de la troisième colonne dans ce cas. –
tomasz86
Essayez ceci à la place. 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 HTML: CSS: Ce sont mes deux suggestions. Utilisation de classes. Il n'est pas nécessaire de spécifier la largeur des deux autres colonnes car elles seront automatiquement définies à 15% par le navigateur. Sans l'aide de classes. Trois méthodes différentes mais le résultat est identique. a) b) c) Celui-ci est mon préféré. Identique à b) mais avec un meilleur support du navigateur.? –
+12
4
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>
3
<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>
+1
21
table{
table-layout:fixed;
}
th.from, th.date {
width: 15%;
}
th.subject{
width: 70%;
}
+2
+0
12
<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>
nth-child() de CSS3 (IE9 +), où vous voulez juste mettre le nr. de la colonne respective dans la parenthèse au lieu de les enchaîner avec le sélecteur adjacent. Comme ceci, 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>
+0
+0
+0
2
<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>
2
:nth-child et les sélecteurs comme: http://jsfiddle.net/3wZWt/.<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>
table {
border-collapse: collapse;
width: 100%;
}
tr > * {
border: 1px solid #000;
}
tr > th + th {
width: 70%;
}
tr > th + th + th {
width: 15%;
}
4
5
table { table-layout: fixed; }
.subject { width: 70%; }<table>
<tr>
<th>From</th>
<th class="subject">Subject</th>
<th>Date</th>
</tr>
</table>
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>
table { table-layout: fixed; }
th:nth-of-type(2) { width: 70%; }<table>
<tr>
<th>From</th>
<th>Subject</th>
<th>Date</th>
</tr>
</table>
table { table-layout: fixed; }
th:first-child+th { width: 70%; }<table>
<tr>
<th>From</th>
<th>Subject</th>
<th>Date</th>
</tr>
</table>
1
table { table-layout: fixed; }
.subject { width: 70%; }<table>
<tr>
<th>From</th>
<th class="subject">Subject</th>
<th>Date</th>
</tr>
</table>
Questions connexes
L'utilisation colgroup est probablement une meilleure pratique si vous voulez le style d'une colonne entière. – Muhd
+1 pour obtenir la spécification de largeur complètement hors du HTML et dans le CSS. – Seth
+1 pour la bonne note sur les anciennes versions de IE; "anciennes versions d'Internet Explorer". – Samuel