Question

Je dois styler une table pour avoir des coins arrondis.

Je cherche simplement à savoir comment s'y prendre:

Normalement, lorsque je donne à un div des angles arrondis, j'utilise 2 divs avec des commentaires vides en haut et en bas et applique le dimensionnement & amp; image de fond CSS pour eux.

Le tableau, cependant, a des bordures internes. Je dois donc aligner soigneusement les lignes verticales dans les angles des images de coin pour les faire correspondre aux vraies bordures des cellules.

Est-ce clair pour loin?

Alors je me demandais comment les autres aborderaient cela. Je pense que la meilleure chose à faire est d'utiliser simplement une image d'arrière-plan de taille fixe complète, les bordures et tout, et de superposer un tableau sans bordure. La table aura toujours la même taille après tout.

Quelqu'un peut-il penser à un meilleur moyen?

Était-ce utile?

La solution

Vous feriez mieux de créer une image d’arrière-plan avec uniquement les coins, et non les bordures. Appliquez une classe à la cellule en haut à gauche, en haut à droite, en bas à gauche et en bas à droite pour définir l’utilisation de l’image coins / arrière-plan.

Et stylisez les frontières avec css. Ne les mettez pas dans l'image de fond.

Dans votre approche, les lignes verticales de votre image d'arrière-plan ne correspondront toujours pas aux bordures des cellules du tableau.

Autres conseils

25 façons de le faire .... http: / /www.cssjuice.com/25-rounded-corners-techniques-with-css/

En fait, il y a trop de façons de le faire.

Avez-vous essayé http://www.roundedcornr.com/ ?

Faites quelque chose comme ça ...

XHTML: (désolé de supprimer d'abord '<' car il ne me permettait pas de le poster normalement, FIX THIS JEFF!) 

table id="pricing" border="0" cellpadding="0" cellspacing="0">
  <thead>
    <tr>
      <th>Incoming calls</th>
      <th>National calls</th>
      <th>Calls to US &amp; Canada</th>
      <th>Calls to other Phones</th>
      <th>Calls to other Countries</th>
      <th>SMS text messages</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Select</td>
      <td>country</td>
      <td>from</td>
      <td>dropdown</td>
      <td>list</td>
      <td>above</td>
    </tr>
  </tbody>
</table>

CSS:     # prix     {       poids de police: gras;       text-align: center     } 

  #pricing thead
  {
    background-image:url("images/pricing_top.gif");
    background-position:top;
    background-repeat:no-repeat;
    padding:10px 0 0 /* replace 10px with the height of pricing_top.gif */
  }

  #pricing th
  {
    background-image:url("images/pricing_header_bg.gif");
    background-repeat:repeat-y;
    border-bottom:1px solid #c3c2c2;
    width:100px /* replace 100px with the width of pricing_header_bg.gif */
  }

  #pricing tbody
  {
    background-image:url("images/pricing_bottom.gif");
    background-position:bottom;
    background-repeat:no-repeat;
    padding:0 0 10px /* replace 10px with the height of pricing_bottom.gif */
  }

  #pricing td
  {
    background-image:url("images/pricing_cell_bg.gif");
    background-repeat:repeat-y;
    width:100px /* replace 100px with the width of pricing_cell_bg.gif */
  }

Le seul inconvénient est que vous devez créer 4 images, mais cela ne devrait pas prendre trop de temps. Vous devrez également ajouter une classe à la dernière cellule de chaque ligne si vous souhaitez ajouter cette ombre portée à droite et simplement modifier sa propriété background-image et width en conséquence.

En reprenant votre idée d'origine, vous pouvez ajouter une classe à chaque cellule d'angle en désactivant efficacement leurs bordures incriminées. Vous pouvez ensuite utiliser une image d’arrière-plan pleine largeur dans & Lt; thead & Gt; et < tfoot > éléments pour tenir compte des coins arrondis.

Les bordures des autres cellules peuvent être activées et les lignes s'aligneront correctement.

Le seul problème qui reste à résoudre est la comptabilisation de cette ombre portée. C'est un exercice différent.

Une meilleure solution serait une grille de 9 où vous avez les coins de l'arrière-plan, et les arrière-plans haut, bas, gauche et droit répétant

Votre tableau va dans la cellule 5

Modifier

Comme certains postés dans les commentaires, vous ne pouvez pas obtenir l’effet avec une grille de 9. Vous devez faire un système de 12 grilles (composé par moi en ce moment :)

démonstration en direct

.

Code:

Attention: ce n'est pas joli, mais ça marche 

<html>
<head>
    <style>


        .cell1 {background: #f8f8f8 url(images/cell1.gif) no-repeat left top; height: 10px; font-size: 1px;}
        .cell2 {background: #f8f8f8 url(images/cell2.gif) repeat-x top; height: 10px; font-size: 1px; border-right: solid 1px #c3c2c2; font-weight:bold;  }
        .cell3 {background: #f8f8f8 url(images/cell3.gif) no-repeat right top; height: 10px; font-size: 1px;}

        .cell4 {background: white url(images/cell4.gif) repeat-y left; border-bottom: solid 1px #c3c2c2; width: 13px; }
        .cell5 {background-color: #f8f8f8; padding: 5px; border-right: solid 1px #c3c2c2; font-weight:bold; border-bottom: solid 1px #c3c2c2; }
        .cell6 {background: white url(images/cell6.gif) repeat-y right; border-bottom: solid 1px #c3c2c2; width: 18px; }

        .cell7 {background: white url(images/cell7.gif) repeat-y left; width: 13px;}
        .cell8 {background-color: white; padding: 5px; border-right: solid 1px #c3c2c2; font-weight:normal;  }
        .cell9 {background: white url(images/cell9.gif) repeat-y right; width: 18px;}


        .cell10 {background: white url(images/cell10.gif) no-repeat left bottom; height: 17px;font-size: 1px; }
        .cell11 {background: white url(images/cell11.gif) repeat-x bottom; border-right: solid 1px #c3c2c2; height: 17px; font-size: 1px; }
        .cell12 {background: white url(images/cell12.gif) no-repeat right bottom; height: 17px;font-size: 1px; }

        .lastcolumn, th.lastcolumn, td.lastcolumn {border-right: solid 0px #c3c2c2; }

    </style>
</head>
<body>


<table id="pricing" border="0" cellpadding="0" cellspacing="0">
  <thead>
    <tr>
      <th class="cell1"></th>
      <th class="cell2">&nbsp;</th>
      <th class="cell2">&nbsp;</th>
      <th class="cell2">&nbsp;</th>
      <th class="cell2">&nbsp;</th>
      <th class="cell2">&nbsp;</th>
      <th class="cell2 lastcolumn">&nbsp;</th>
      <th class="cell3"></th>
    </tr>
    <tr>
      <th class="cell4">&nbsp;</th>
      <th class="cell5">Incoming calls</th>
      <th class="cell5">National calls</th>
      <th class="cell5">Calls to US &amp; Canada</th>
      <th class="cell5">Calls to other Phones</th>
      <th class="cell5">Calls to other Countries</th>
      <th class="cell5 lastcolumn">SMS text messages</th>
      <th class="cell6">&nbsp;</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="cell7"></td>
      <td class="cell8">Select</td>
      <td class="cell8">country</td>
      <td class="cell8">from</td>
      <td class="cell8">dropdown</td>
      <td class="cell8">list</td>
      <td class="cell8 lastcolumn">above</td>
      <td class="cell9"></td>
    </tr>
    <tr>
      <td class="cell10"></td>
      <td class="cell11">&nbsp;</td>
      <td class="cell11">&nbsp;</td>
      <td class="cell11">&nbsp;</td>
      <td class="cell11">&nbsp;</td>
      <td class="cell11">&nbsp;</td>
      <td class="cell11 lastcolumn">&nbsp;</td>
      <td class="cell12"></td>
    </tr>
  </tbody>
</table>


</body>
</html>

Remarque: il existe des espaces insécables que SO supprime du code. Découvrez la démo live pour plus d'informations

Profitez!

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top