Stile delle tabelle CSS
https://stackoverflow.com/questions/284475
-
08-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Devo modellare un tavolo in modo che abbia gli angoli arrotondati.
Sto solo cercando il modo migliore per procedere:
Normalmente quando modifico un div in modo che abbia gli angoli arrotondati, utilizzo 2 div con commenti vuoti in alto e in basso e applico loro il ridimensionamento e il CSS dell'immagine di sfondo.
La tabella, tuttavia, ha bordi interni, quindi dovrei allineare attentamente le linee verticali nell'angolo bg delle immagini, in modo che corrispondano ai bordi reali della cella.
È chiaro finora?
Quindi mi chiedevo come gli altri si sarebbero avvicinati a questo.Penso che la cosa migliore che posso fare sia utilizzare semplicemente un'immagine di sfondo completa a dimensione fissa, bordi e tutto, e sovrapporre una tabella senza bordi sopra.Dopotutto il tavolo avrà sempre le stesse dimensioni.
Qualcuno riesce a pensare a un modo migliore?
Soluzione
È meglio creare un'immagine di sfondo con solo gli angoli e non i bordi. Applica una classe nella cella in alto a sinistra, in alto a destra, in basso a sinistra e in basso a destra, per definire che deve essere utilizzata l'immagine di sfondo degli angoli.
E disegna i bordi con css. Non metterli nell'immagine di sfondo.
Nel tuo approccio, finirai sempre per avere le linee verticali nell'immagine di sfondo che non corrispondono ai bordi delle celle della tabella reale.
Altri suggerimenti
25 modi per farlo .... http: / /www.cssjuice.com/25-rounded-corners-techniques-with-css/
In realtà, ci sono troppi modi per farlo.
Hai provato http://www.roundedcornr.com/ ?
Fai qualcosa del genere ...
XHTML: (scusami ho dovuto rimuovere prima '<' poiché non mi permetteva di pubblicarlo normalmente, FISSA QUESTO JEFF!)
table id="pricing" border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>Incoming calls</th>
<th>National calls</th>
<th>Calls to US & 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: #pricing { font-weight: bold; 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 */
}
L'unico inconveniente è che devi creare 4 immagini, ma ciò non dovrebbe richiedere troppo tempo. Dovrai anche aggiungere una classe all'ultima cella in ogni riga se vuoi aggiungere quell'ombra esterna a destra e cambiare di conseguenza la sua immagine di sfondo e la proprietà di larghezza di conseguenza.
Basandosi sulla tua idea originale, potresti aggiungere una classe a ciascuna cella d'angolo disattivando in modo efficace i rispettivi bordi offensivi.Potresti quindi utilizzare un'immagine di sfondo a larghezza intera negli elementi <thead> e <tfoot> per tenere conto degli angoli arrotondati.
È possibile attivare i bordi del resto delle celle e le linee si allineeranno correttamente.
L'unico problema rimasto è tenere conto di quella dannata ombra.Questo è un esercizio diverso.
Un modo migliore sarebbe una griglia a 9 in cui hai gli angoli dello sfondo e gli sfondi superiore, inferiore, sinistro e destro che si ripetono
La tabella va nella cella 5
Modifica
Come alcuni postati nei commenti non è possibile ottenere l'effetto con una griglia a 9. Devi fare un sistema a 12 griglie (creato da me proprio ora :)
Demo live
.
Codice:
Attenzione: non è carino, ma funziona
<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"> </th>
<th class="cell2"> </th>
<th class="cell2"> </th>
<th class="cell2"> </th>
<th class="cell2"> </th>
<th class="cell2 lastcolumn"> </th>
<th class="cell3"></th>
</tr>
<tr>
<th class="cell4"> </th>
<th class="cell5">Incoming calls</th>
<th class="cell5">National calls</th>
<th class="cell5">Calls to US & 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"> </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"> </td>
<td class="cell11"> </td>
<td class="cell11"> </td>
<td class="cell11"> </td>
<td class="cell11"> </td>
<td class="cell11 lastcolumn"> </td>
<td class="cell12"></td>
</tr>
</tbody>
</table>
</body>
</html>
Nota: ci sono alcuni spazi non-break che SO cancella dal codice. Guarda la demo vivente per maggiori informazioni
Enjoy!
