Frage

Ich brauche einen Tisch, um Stil abgerundete Ecken haben.

Ich bin nur an, wie am besten, darüber zu gehen:

Normalerweise, wenn ich einen div style abgerundete Ecken haben, verwende ich 2 divs mit leeren Kommentare an der Ober- und Unterseite und gelten Sizing & Hintergrundbild CSS zu ihnen.

Die Tabelle hat jedoch die Binnengrenzen, so würde ich sorgfältig die vertikalen Linien in den Ecken bg Bildern ausrichten, mit den wahren Zellgrenzen entsprechen.

Ist das klar, so weit?

Also ich frage mich, wie andere würde diesen Ansatz. Ich denke, das Beste, was ich tun kann, ist nur eine vollständige feste Größe Hintergrundbild, Grenzen zu verwenden und alle, und überlagern eine randlose Tabelle oben. Die Tabelle wird die gleiche Größe schließlich immer sein.

Kann jemand denken Sie an einen besseren Weg?

War es hilfreich?

Lösung

Sie besser ein Hintergrundbild machen nur mit den Ecken, und nicht die Grenzen. Tragen Sie eine Klasse nach oben links, oben rechts, unten links und unten rechts Zelle zu definieren, dass das Ecken-Hintergrundbild verwendet werden.

Und Stil der Grenzen mit CSS. Legen Sie sie nicht in dem Hintergrundbild.

In Ihrem Ansatz, werden Sie immer würden die vertikalen Linien in Ihrem Hintergrundbild am Ende mit nicht den Grenzen der eigentlichen Tabellenzellen entsprechen.

Andere Tipps

25 Möglichkeiten, es .... http zu tun: / /www.cssjuice.com/25-rounded-corners-techniques-with-css/

Eigentlich gibt es zu viele Möglichkeiten, es zu tun.

Haben Sie versucht, http://www.roundedcornr.com/ ?

Sie so etwas wie dieses ...

XHTML: (sorry! Mußte zuerst entfernen '<', wie es würde ich es nicht zulassen, gebe normalerweise FOLGENDEN JEFF FIX) 

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:     #Preisgestaltung     {       Schriftdicke: fett;       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 */
  }

Der einzige Nachteil ist, dass Sie 4 Bilder erstellen, aber das sollte nicht zu lange dauern. Sie werden auch in jeder Zeile eine Klasse auf die letzte Zelle hinzufügen müssen, wenn Sie diesen Schlagschatten auf der rechten Seite hinzufügen möchten, und ändern Sie einfach es ist Hintergrund-Bild und Breite Eigenschaft entsprechend.

aus Ihrer ursprünglichen Idee spielen, eine Klasse zu jeder Ecke Zelle ihrer jeweiligen säumigen Grenzen effektiv ausgeschaltet hinzufügen könnte. Sie könnten dann ein volles Breite Hintergrundbild in den und Elementen für die abgerundeten Ecken zu berücksichtigen.

Der Rest der Zellen können ihre Grenzen haben eingeschaltet, und die Linien werden in einer Reihe aufstellen richtig.

Die einzige noch offene Frage ist für die Bilanzierung gestrahlt Schlagschatten. Das ist eine andere Übung.

Eine bessere Möglichkeit, ein 9-Gitter wäre, wenn Sie die Hintergrund Ecken haben, und oben, unten, links und rechts Hintergründe zu wiederholen

Ihr Tisch geht in Zelle 5

Bearbeiten

Wie einige in den Kommentaren gepostet Sie den Effekt mit einem 9-Gitter nicht erreichen können. Sie haben ein 12-Grid-System zu tun (von mir jetzt aus :)

Live-Demo

.

Code:

Achtung: es ist nicht schön, aber funktioniert 

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

Hinweis: Es gibt einige nicht-breaking Speicherplatz, die so Streifen aus dem Code. Schauen Sie sich das Leben Demo für weitere Informationen

Genießen Sie!

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top