Bordure autour de lignes dans une table?

Je suis en train de design HTML/CSS qui peut mettre une bordure autour de lignes dans une table. Oui, je sais que je ne suis pas vraiment censé utiliser des tableaux pour la mise en page, mais je ne connais pas assez bien le CSS pour remplacer complètement encore.

De toute façon, j'ai un tableau avec plusieurs lignes et colonnes, certaines ont fusionné avec rowspan et colspan, et j'aimerais mettre une simple bordure autour des parties de la table. Actuellement, je suis à l'aide de 4 classes CSS (haut, bas, gauche, droite) que j'attache à la <td> les cellules qui sont en haut, en bas, à gauche et à droite de la table, respectivement.

CSS:

.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:

<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>

Est-il un moyen plus facile de faire ce que je veux? J'ai essayé d'appliquer le haut et le bas d'un <tr> mais il ne fonctionne pas. (p.s. Je suis nouveau sur le CSS, il y a probablement vraiment une solution de base de ce que j'ai manqué.)

remarque: j'ai besoin d'avoir plusieurs bordé sections. L'idée de base est d'avoir plusieurs bordé clusters contenant chacun plusieurs lignes.

  • Hors-sujet, mais je voulais juste dire, les tables sont parfaitement approprié et recommandé lors de l'affichage des données tabulaires...
InformationsquelleAutor Kyle Cronin | 2009-03-22
  1. 111

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

    • Je posais des questions à propos de mettre une bordure autour de plusieurs lignes dans une table, essentiellement visuellement en le divisant en plusieurs sections, mais dans le même tableau, donc des trucs à partir de différents articles est en place.
    • Compris, j'en avais besoin aussi. Placez l'ensemble de lignes que vous voulez une bordure autour de leur propre tbody, et le css ci-dessus va créer une bordure autour de l'ensemble d'entre eux-c'est à dire, un top de la frontière sur la ligne du haut, un en bas de la frontière sur la ligne du bas et des bords droit et gauche sur toutes les lignes de la tbody. Les frontières ne sont pas réellement "sur" ces lignes, ils sont sur le contour de la tbody lui-même, tout en essayant de décrire l'effet.
    • Oh, je vois, plusieurs tbodys - qui fonctionne, et c'est quelque chose que je n'avais pas envisagée. Upvoted 🙂
    • Je vous recommande d'utiliser le nth-child() propriété css plutôt que de définir tbodys, sauf si vous avez un peu assez de données dynamiques. À l'aide de nth-child(), nth-last-child(), et non pas(), vous pouvez sélectionner des lignes ou des cellules que vous voulez (tant que vous savez la relative indices de choses dans la table). Par exemple, vous pouvez sélectionner toutes les lignes sauf les deux premiers et le fond avec le tr:not(:nth-child (n+2)):not(:nth-last-child(1))
    • Notez que le contour n' pas ont la possibilité de frontière spécifiques côtés d'un élément. Il n'y a pas de "plan-haut", par exemple. C'est une solution limitée
    • Dans Microsoft Bord de ce qui semble étrange. La frontière position est en dehors de la ligne de la cellule de la frontière, au moins dans la ligne d'en-tête lorsque je l'ai essayé

    InformationsquelleAutor enigment
  2. 53

    Merci à tous ceux qui ont répondu! J'ai essayé toutes les solutions présentées ici et j'ai fait plus de recherche sur l'internet pour d'autres solutions possibles, et je pense en avoir trouvé un qui est prometteur:

    CSS:

    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:

    <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>

    De sortie:

    Bordure autour de lignes dans une table?

    Au lieu d'avoir à ajouter de l' top, bottom, left, et right classes pour chaque <td>, tout ce que j'ai à faire est d'ajouter top row vers le haut <tr>, bottom row vers le bas <tr>, et row à chaque <tr> entre les deux. Il n'y a rien de mal avec cette solution? Il y a aucune croix-plate-forme de questions, je devrais être au courant?

    InformationsquelleAutor Kyle Cronin
  3. 36

    Si vous définissez la border-collapse style de collapse sur la table parent, vous devriez être en mesure de style de la tr:
    (les styles sont en ligne pour une 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>

    De sortie:

    Bordure autour de lignes dans une table?

    InformationsquelleAutor Sunrise
  4. 8

    J'étais en train de jouer avec faire trop, 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>

    Noter que cela permettra d'éviter l'utilisation d'un fluide/automatique des largeurs de colonne, que les cellules n'étaient plus alignés avec ceux des autres lignes, mais la frontière/couleur formatage fonctionne toujours OK. La solution est de donner le TR et td d'une largeur spécifiée (soit px ou en %).

    Bien sûr, vous pouvez faire le sélecteur de tr.myClass si vous voulait s'appliquent uniquement à certaines lignes. Apparemment display: table ne fonctionne pas pour IE 6/7, cependant, mais il y a probablement d'autres hacks (hasLayout?) c'est peut-être pour ceux. 🙁

    • Cette solution est incorrecte: "display: table" met l'ensemble de la ligne dans une cellule de tableau --- vous perdre la mise en forme à l'égard des autres lignes de la table. J'ai essayé sous Firefox et Chrome.
    • Yaakov, je pense que vous faites allusion à l'est que la colonne de liquide largeurs de ne plus aligner avec les autres lignes du tableau (comme on le voit dans ce violon: jsfiddle.net/MrKtw ), mais la frontière/couleur formatage fonctionne toujours OK. La solution est de donner le TR et td d'une largeur spécifiée (soit px ou en %).
    • Simon, pour montrer ce que je veux dire, je bifurquais et changé votre violon. Regardez ceci: jsfiddle.net/a6DZV - - - - je appliquer le "display: table de" mise en forme à une seule ligne. Comme vous le voyez, cela fait de cette ligne de manière efficace dans une cellule de la table. En d'autres termes: Vous obtenez le même résultat que l'imbrication d'une rangée de tables à l'intérieur d'une cellule d'une autre table (et en montrant la frontière de cette table interne). Votre solution permet d'économiser quelques nœuds du DOM mais n'est pas compatible.
    InformationsquelleAutor Simon East
  5. 3

    Voici une approche à l'aide tbody éléments qui pourraient être le moyen de le faire. Vous ne pouvez pas définir la frontière, sur un tbody (le même que vous ne pouvez pas sur un tr), mais vous pouvez définir la couleur d'arrière-plan. Si l'effet vous êtes désireux de réaliser peut être obtenu avec une couleur de fond sur les groupes de lignes au lieu d'une frontière, ce sera le travail.

    <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>
    InformationsquelleAutor sipwiz
  6. 2

    Groupe de lignes à l'aide du <tbody> tag et ensuite appliquer 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 le style.css

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

    La seule autre façon que je peux penser à faire c'est de joindre chacune des lignes que vous besoin d'une bordure autour d'une table imbriquée. Qui va rendre la frontière plus facile à faire mais peut créer d'autres problèmes de mise en page, vous devez définir manuellement la largeur sur les cellules de tableau etc.

    Votre approche peut-être bien le meilleur en fonction de votre disposition d'autres rerquirements et l'approche proposée ici est juste 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>
    • Merci pour votre réponse; vous avez raison au sujet de la mise en page des questions si - je préfère les colonnes à aligner sans le faire à la main. Ce sujet de l'application d'une classe à un <tr> tag - est-ce possible?
    • Si vous utilisez une table avec une “table-layout: fixed” et de définir explicitement la largeur de chaque colonne (par l'utilisation de <col> ou simplement de réglage de la largeur des cellules de la première ligne), les colonnes de la ligne des indépendamment du contenu. Vous n'avez même pas besoin de s'imbriquer les tables, les trois tables distinctes, ferait l'exemple de l'amende.
    InformationsquelleAutor sipwiz
  8. 1

    En fonction de votre exigence que vous voulez mettre une bordure autour de l'arbitraire d'un bloc de MxN cellules il n'y a vraiment pas de moyen plus facile de le faire sans l'aide de Javascript. Si vos cellules sont fixées avec des vous pouvez utiliser des flotteurs mais c'est problématique pour d'autres raisons. ce que vous faites peut être fastidieux, mais c'est très bien.

    Ok, si vous êtes intéressé par une solution d'activer Javascript, utilisation de jQuery (mon approche préférée), vous vous retrouvez avec ce assez effrayant morceau de code:

    <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 vais heureux de suggestions sur les façons plus faciles de le faire...

    • Semble que vous êtes juste l'ajout de classes pour les balises td? Pourquoi ne pouvait-il pas être fait avec certains de script côté serveur, généré de manière statique, ou pire-cas à la main? Ressemble JavaScript abus pour moi.
    • En fait, l'affiche a DEMANDÉ une solution d'activer Javascript. Vous ne pouvez pas dire que c'est du Javascript abus car il n'y a pas assez d'information. Par exemple, les frontières ajoutée parce que de cliquer sur l'utilisateur n'? Si oui, une solution de serveur est incorrect.
    • Désolé pour le manque d'information. Ce sera généré côté serveur, donc c'est vrai que je pourrais juste ajouter dans les classes manuellement, mais j'aime la manière dont la JS solution fournit une interface simple à faire. Ainsi, alors que je ne sera probablement pas aller avec le JS c'est une bonne solution pour voir.
    InformationsquelleAutor cletus
  9. 0

    le truc, c'est avec le contour de la propriété grâce à enigment réponse avec peu de modifications,

    l'utilisation de cette classe 

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

    ensuite dans le code HTML

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

    et le résultat est
    Bordure autour de lignes dans une table?
    espérons que cela vous aide

    InformationsquelleAutor Basheer AL-MOMANI
  10. -4

    Un moyen plus facile est de faire de la table un côté serveur de contrôle. Vous pouvez utiliser quelque chose de similaire à ceci:

    Dim x As Integer
table1.Border = "1"
'Change the first 10 rows to have a black border
For x = 1 To 10
table1.Rows(x).BorderColor = "Black"
Next
'Change the rest of the rows to white
For x = 11 To 22
table1.Rows(x).BorderColor = "White"
Next
    • L'OP est en demande d'un facile moyen de le faire
    • Attention, OP demande également un moyen plus facile de le faire en HTML/CSS. Je ne vois pas de n'importe où dans sa question, la VB ou VBA clé. Je vous suggère de jeter un oeil à notre section d'Aide : stackoverflow.com/help/how-to-answer Bonne Chance.
    InformationsquelleAutor Curtis