web-dev-qa-db-fra.com

Bordure autour de lignes spécifiques dans une table?

J'essaie de concevoir du HTML/CSS capable de placer une bordure autour de lignes spécifiques dans un tableau. Oui, je sais que je ne suis pas vraiment censé utiliser de tableaux pour la mise en page, mais je ne connais pas encore suffisamment de CSS pour le remplacer complètement.

Quoi qu'il en soit, j'ai une table avec plusieurs lignes et colonnes, certaines fusionnées avec rowspan et colspan, et j'aimerais mettre une simple bordure autour de certaines parties de la table. Actuellement, j'utilise 4 classes CSS distinctes (haut, bas, gauche, droite) que j'attache aux cellules <td> qui se trouvent respectivement en haut, en bas, à gauche et à droite du tableau.

.top {
  border-top: thin solid;
  border-color: black;
}

.bottom {
  border-bottom: thin solid;
  border-color: black;
}

.left {
  border-left: thin solid;
  border-color: black;
}

.right {
  border-right: thin solid;
  border-color: black;
}
<html>

<body>

  <table cellspacing="0">
    <tr>
      <td>no border</td>
      <td>no border here either</td>
    </tr>
    <tr>
      <td class="top left">one</td>
      <td class="top right">two</td>
    </tr>
    <tr>
      <td class="bottom left">three</td>
      <td class="bottom right">four</td>
    </tr>
    <tr>
      <td colspan="2">once again no borders</td>
    </tr>
    <tr>
      <td class="top bottom left right" colspan="2">hello</td>
    </tr>
    <tr>
      <td colspan="2">world</td>
    </tr>
  </table>

</html>

Y a-t-il un moyen plus facile de faire ce que je veux? J'ai essayé d'appliquer top et bottom à un <tr> mais cela n'a pas fonctionné. (p. Je suis nouveau dans CSS, il y a donc probablement une solution très basique que j'ai manquée.)

note: J'ai besoin de plusieurs sections bordées. L'idée de base est de disposer de plusieurs groupes bordés contenant chacun plusieurs lignes.

htmlcssbordercss-tables
117
Kyle Cronin

Que diriez-vous de tr {outline: thin solid black;}? Fonctionne pour moi sur les éléments tr ou tbody, et apparaît pour être compatible avec la plupart des navigateurs, y compris IE 8+ mais pas avant.

110
enigment

Merci à tous ceux qui ont répondu! J'ai essayé toutes les solutions présentées ici et j'ai fait davantage de recherches sur Internet pour trouver d'autres solutions possibles. Je pense en avoir trouvé une qui soit prometteuse:

tr.top td {
  border-top: thin solid black;
}

tr.bottom td {
  border-bottom: thin solid black;
}

tr.row td:first-child {
  border-left: thin solid black;
}

tr.row td:last-child {
  border-right: thin solid black;
}
<html>

<head>
</head>

<body>

  <table cellspacing="0">
    <tr>
      <td>no border</td>
      <td>no border here either</td>
    </tr>
    <tr class="top row">
      <td>one</td>
      <td>two</td>
    </tr>
    <tr class="bottom row">
      <td>three</td>
      <td>four</td>
    </tr>
    <tr>
      <td colspan="2">once again no borders</td>
    </tr>
    <tr class="top bottom row">
      <td colspan="2">hello</td>
    </tr>
    <tr>
      <td colspan="2">world</td>
    </tr>
  </table>

</body>

</html>

Sortie:

enter image description here

Au lieu d'avoir à ajouter les classes top, bottom, left et right à chaque <td>, tout ce que je dois faire est d'ajouter top row au sommet <tr>, bottom row au <tr> inférieur, et à row à chaque <tr> supérieur. Y a-t-il un problème avec cette solution? Existe-t-il des problèmes multi-plateformes dont je devrais être au courant?

51
Kyle Cronin

Si vous définissez le style border-collapse sur collapse sur la table parente, vous devriez pouvoir styliser la tr: (les styles sont en ligne pour la démo) 

<table style="border-collapse: collapse;">
  <tr>
    <td>No Border</td>
  </tr>
  <tr style="border:2px solid #f00;">
    <td>Border</td>
  </tr>
  <tr>
    <td>No Border</td>
  </tr>
</table>

Sortie:

HTML output

34
Sunrise

Je jouais juste avec ça aussi, et cela semblait être la meilleure option pour moi:

<style>
    tr { 
        display: table;            /* this makes borders/margins work */
        border: 1px solid black;
        margin: 5px;
    }
</style>

Notez que cela empêchera l'utilisation de largeurs de colonne fluides/automatiques , car les cellules ne s'aligneront plus sur celles des autres lignes, mais le formatage des bordures/couleurs fonctionne toujours correctement. La solution consiste à donner aux TR et aux TD une largeur spécifiée (px ou%).

Bien sûr, vous pouvez créer le sélecteur tr.myClass si vous souhaitez l'appliquer uniquement à certaines lignes. Apparemment, display: table ne fonctionne pas pour IE 6/7, cependant, mais il existe probablement d'autres hacks (hasLayout?) Qui pourraient fonctionner pour ceux-ci. :-(

8
Simon East

Voici une approche utilisant des éléments tbody qui pourrait être le moyen de le faire. Vous ne pouvez pas définir la bordure sur un tbody (comme sur un tr) mais vous pouvez définir la couleur de fond. Si l'effet que vous souhaitez obtenir peut être obtenu avec une couleur d'arrière-plan sur les groupes de lignes au lieu d'une bordure, cela fonctionnera.

<table cellspacing="0">  
    <tbody>
        <tr>    
            <td>no border</td>    
            <td>no border here either</td>  
        </tr>  
    <tbody bgcolor="gray">
        <tr>    
            <td>one</td>    
            <td>two</td>  
        </tr>  
        <tr>    
            <td>three</td>    
            <td>four</td>  
        </tr>  
    <tbody>
        <tr>    
             <td colspan="2">once again no borders</td>  
        </tr>  
    <tbody bgcolor="gray">
        <tr>    
             <td colspan="2">hello</td>  
        </tr>
    <tbody>
    <tr>    
         <td colspan="2">world</td>  
    </tr>
</table>
3
sipwiz

Regroupez les lignes à l'aide de la balise <tbody>, puis appliquez un style.

<table>
  <tr><td>No Style here</td></tr>
  <tbody class="red-outline">
    <tr><td>Style me</td></tr>
    <tr><td>And me</td></tr>
  </tbody>
  <tr><td>No Style here</td></tr>
</table>

Et le css dans style.css

.red-outline {
  outline: 1px solid red;
}
2
csi

En fonction de votre exigence de vouloir placer une bordure autour d'un bloc arbitraire de cellules MxN, il n'y a pas de moyen plus simple de le faire sans utiliser Javascript. Si vos cellules sont réparées, vous pouvez utiliser des flottants, mais cela pose problème pour d'autres raisons. ce que vous faites peut être fastidieux mais c'est bien.

Ok, si vous êtes intéressé par une solution Javascript utilisant jQuery (mon approche préférée), vous vous retrouvez avec cet élément de code assez effrayant:

<html>
<head>

<style type="text/css">
td.top { border-top: thin solid black; }
td.bottom { border-bottom: thin solid black; }
td.left { border-left: thin solid black; }
td.right { border-right: thin solid black; }
</style>
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript">
$(function() {
  box(2, 1, 2, 2);
});

function box(row, col, height, width) {
  if (typeof height == 'undefined') {
    height = 1;
  }
  if (typeof width == 'undefined') {
    width = 1;
  }
  $("table").each(function() {
    $("tr:nth-child(" + row + ")", this).children().slice(col - 1, col + width - 1).addClass("top");
    $("tr:nth-child(" + (row + height - 1) + ")", this).children().slice(col - 1, col + width - 1).addClass("bottom");
    $("tr", this).slice(row - 1, row + height - 1).each(function() {
      $(":nth-child(" + col + ")", this).addClass("left");
      $(":nth-child(" + (col + width - 1) + ")", this).addClass("right");
    });
  });
}
</script>
</head>
<body>

<table cellspacing="0">
  <tr>
    <td>no border</td>
    <td>no border here either</td>
  </tr>
  <tr>
    <td>one</td>
    <td>two</td>
  </tr>
  <tr>
    <td>three</td>
    <td>four</td>
  </tr>
  <tr>
    <td colspan="2">once again no borders</td>
  </tr>
</tfoot>
</table>
</html>

Je me ferai un plaisir de prendre des suggestions sur des moyens plus simples de le faire ...

1
cletus

Le seul autre moyen auquel je puisse penser est de placer chacune des lignes pour lesquelles vous avez besoin d’une bordure dans un tableau imbriqué. Cela facilitera la création de la bordure, mais créera éventuellement d’autres problèmes de mise en page; vous devrez définir manuellement la largeur des cellules du tableau, etc. 

Votre approche pourrait bien être la meilleure en fonction de vos autres exigences de mise en page et l’approche suggérée ici n’est qu’une alternative possible.

<table cellspacing="0">  
    <tr>    
        <td>no border</td>    
        <td>no border here either</td>  
    </tr>  
    <tr>
        <td>
             <table style="border: thin solid black">
                  <tr>    
                        <td>one</td>    
                        <td>two</td>  
                  </tr>  
                  <tr>    
                      <td>three</td>    
                      <td>four</td>  
                  </tr>  
             </table>
         </td>
    </tr>
    <tr>    
         <td colspan="2">once again no borders</td>  
    </tr>  
    <tr>
        <td>
             <table style="border: thin solid black">
                  <tr>    
                        <td>hello</td>  
                   </tr>
             </table>
         </td>
    </tr>
    <tr>    
         <td colspan="2">world</td>  
    </tr>
</table>
1
sipwiz

l'astuce est avec propriété de contour grâce à réponse de l'énigment avec peu de modification

utiliser cette classe 

.row-border{
    outline: thin solid black;
    outline-offset: -1px;
}

puis dans le HTML

<tr>....</tr>
<tr class="row-border">
    <td>...</td>
    <td>...</td>
</tr>

et le résultat est  enter image description here espérons que cela vous aide

0
Basheer AL-MOMANI