Mise en forme (largeur de fixation) de colonnes dans une table spécifique sans affecter d'autres tables

Je souhaite corriger la largeur (en pixels) de trois colonnes d'une table sans affecter les autres tables par style. Je peux obtenir l'effet désiré en stylisant les colonnes voir le code ci-dessous. Cependant le style sur les colonnes ci-dessous n'est pas lié à une table spécifique. Je souhaite utiliser le style de sorte que je n'ai pas besoin d'utiliser la ligne <col ...> chaque fois que j'utilise la table spécifiée. c'est-à-dire que je souhaite lier la fixation de la largeur de colonne à une table spécifique. Le code ci-dessous ne lie pas le col.tablerightcol1 à la table.tableright qui est ce que je souhaite faire.Mise en forme (largeur de fixation) de colonnes dans une table spécifique sans affecter d'autres tables

<head> 
<title> xxxxx </title> 
<style type="text/css"> 

table.tableleft { 
      width: 140px ; 
     align centre ; 
     } 


table.tableright { 
      background-color: #E8E8E8 ; 
     width: 840px ; 
     height: 220px ; 
     } 

col.tablerightcol1 { 
      align: right ; 
      width:220px ; 
     } 
col.tablerightcol2 { 
      align: center ; 
      width:400px ; 
     } 
col.tablerightcol3 { 
      align: center ; 
      width:220px ; 
     } 

</style> 
</head> 

<html> 
<body > 
<table border=2 class = "tableright" > 
    <col class="tablerightcol1" /> 
    <col class="tablerightcol2" /> 
    <col class="tablerightcol3" /> 
    <tr> 
     <td > 
....

Source

2010-11-03 steveq

En relation: [html css layout. Largeur totale fixe, 3 colonnes, colonne centrale dynamique] (http://stackoverflow.com/questions/3522783/html-css-layout-fixed-total-width-3-columns-dynamic-middle-column). –

Vous pouvez le sélecteur prendre en compte, par exemple:

table.tableright col.col1 { align: right; width:220px; } 
table.tableright col.col2 { align: center; width:400px; } 
table.tableright col.col3 { align: center; width:220px; }

et le balisage correspondant:

<table border="2" class="tableright" > 
    <col class="col1" /> 
    <col class="col2" /> 
    <col class="col3" />

De cette façon, vos styles affectent seulement <col> éléments avec cette classe si ils sont à l'intérieur d'un élément <table class="tableright">.

Source

2010-11-03 12:20:33

Vous pouvez utiliser le sélecteur de pseudo-classe CSS nth-child, mais il n'est pris en charge par aucune des versions d'IE jusqu'à 8.0 (voir http://reference.sitepoint.com/css/pseudoclass-nthchild pour plus de détails).

table.tableright col:nth-child(1) { align: right; width:220px; }

Source

2010-11-03 12:35:03 csgero

Mise en forme (largeur de fixation) de colonnes dans une table spécifique sans affecter d'autres tables

Répondre

Questions connexes