web-dev-qa-db-fra.com

Couleur de la bordure du tableau en CSS avec réduction de la bordure

Je veux mettre une ligne au-dessus d'un champ dans une table, pour indiquer qu'il s'agit d'une somme des valeurs ci-dessus. Cependant, la table a déjà des bordures par défaut.

Voici un exemple: j'ai un tableau dont les bordures se sont effondrées. J'ai placé la bordure en bas sur un champ et la bordure en haut sur le champ en dessous. Les deux spécifient la même bordure. Le CSS pour celui du haut est utilisé. Existe-t-il un moyen d'utiliser celui du bas?

<html>
    <head>
        <style type="text/css">
            table { border-collapse: collapse; }
            td.first { border-bottom: solid red 1px; }
            td.second { border-top: solid gold 1px; }
        </style>

    <body>
        <table>
            <tr><td class="first">Hello</td></tr>
            <tr><td class="second">World</td></tr>
        </table>
    </body>
</html>

Cela montre deux cellules avec une ligne rouge entre elles. Existe-t-il un moyen d'obtenir une ligne d'or?

csshtml-tableborderborder-collapse
32
Sjoerd

Il s'agit d'un comportement défini de border-collapse. La page 357 du O'Reilly CSS Definitive Guide 3rd Edition dit:

si les bordures réduites ont le même style et la même largeur, mais diffèrent en couleur, alors ... du plus au moins préféré: cellule, ligne, groupe de lignes, colonne, groupe de colonnes, tableau.

si ... proviennent du même type d'élément, comme deux rangées ... alors la couleur est prise à partir des bordures les plus hautes et les plus à gauche.

Ainsi, le plus haut, qui est rouge, l'emporte.

Une façon de contourner cela peut être d'utiliser la cellule pour que la couleur l'emporte sur la couleur de la ligne.

exemple: http://jsfiddle.net/Chapm/

Les règles qui ont une priorité plus élevée que cette "règle de même couleur est"

une frontière plus large l'emporte sur les plus étroites

et après ça,

double victoire sur solide, puis pointillé, pointillé, faîtage, début, rainure, encart

Vous pouvez utiliser 2px pour l'or pour qu'il gagne, et j'ai essayé dans Chrome pour utiliser 1px mais double, et il apparaît comme 1px solid et il gagnera aussi le rouge. Bien que si vous souhaitez utiliser cette méthode, il peut être préférable de vous assurer que les navigateurs que vous prenez en charge se comportent de la même manière en utilisant cette technique.

http://jsfiddle.net/Chapm/2/

59
太極者無極而生

Modifiez simplement border-collapse pour séparer et définissez l'espacement des bordures à zéro.

Remarque: IE8 prend en charge la propriété border-spacing uniquement si un! DOCTYPE est spécifié.

<!DOCTYPE html>
<html>

<head>
  <style type="text/css">
    table {
      border-collapse: separate;
      border-spacing: 0px;
    }
    
    td.first {
      border-bottom: solid red 1px;
    }
    
    td.second {
      border-top: solid gold 1px;
    }
  </style>
</head>

<body>
  <table>
    <tr>
      <td class="first">Hello</td>
    </tr>
    <tr>
      <td class="second">World</td>
    </tr>
  </table>
</body>

</html>

Testé sur win7 avec: Chrome 16, IE 9, FF 9, Safari 5.0.5.

5
Dalius I

Retirer border-collapse: collapse; à partir de votre code, définissez plutôt l'attribut cellspacing sur 0 pour votre table.

1
Chinmayee G

Retirez simplement le td.first { border-bottom: solid red 1px; } de votre style.

Ou remplacez red par gold dans le td.first sélecteur.

Exemple ici .

0
Kyle