Estilo de tabla CSS
https://stackoverflow.com/questions/284475
-
08-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Necesito diseñar una tabla para tener esquinas redondeadas.
Solo estoy viendo la mejor manera de hacerlo:
Normalmente cuando diseño un div para que tenga esquinas redondeadas, uso 2 divs con comentarios vacíos en la parte superior e inferior, y aplico el tamaño & amp; CSS de imagen de fondo para ellos.
Sin embargo, la tabla tiene bordes internos, por lo que tendría que alinear cuidadosamente las líneas verticales en las imágenes bg de la esquina, para que coincidan con los bordes de las celdas verdaderas.
¿Está claro así? lejos?
Entonces me preguntaba cómo otros abordarían esto. Creo que lo mejor que puedo hacer es usar una imagen de fondo de tamaño fijo completo, bordes y todo, y superponer una tabla sin bordes en la parte superior. La tabla siempre tendrá el mismo tamaño después de todo.
¿Alguien puede pensar en una mejor manera?
Solución
Será mejor que cree una imagen de fondo solo con las esquinas y no con los bordes. Aplique una clase a la celda superior izquierda, superior derecha, inferior izquierda e inferior derecha para definir que se debe utilizar la imagen de fondo de las esquinas.
Y dale estilo a los bordes con css. No los coloque en la imagen de fondo.
En su enfoque, siempre terminará teniendo las líneas verticales en su imagen de fondo que no coinciden con los bordes de las celdas de la tabla real.
Otros consejos
25 formas de hacerlo ... http: / /www.cssjuice.com/25-itated-corners-techniques-with-css/
En realidad, hay muchas formas de hacerlo.
¿Has probado http://www.itatedcornr.com/ ?
Haz algo como esto ...
XHTML: (lo siento, tuve que eliminar primero '<' ya que no me dejaba publicarlo normalmente, ¡ARREGLAR ESTE 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: #precio { peso de fuente: negrita; alinear texto: centro }
#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 */
}
El único inconveniente es que debe crear 4 imágenes, pero eso no debería llevar demasiado tiempo. También deberá agregar una clase a la celda final en cada fila si desea agregar esa sombra paralela a la derecha y simplemente cambiar su propiedad de imagen de fondo y ancho en consecuencia.
A partir de su idea original, puede agregar una clase a cada celda de la esquina desactivando efectivamente sus respectivos bordes ofensivos. Luego, podría usar una imagen de fondo de ancho completo en & Lt; thead & Gt; y < tfoot > elementos para tener en cuenta las esquinas redondeadas.
El resto de las celdas pueden tener sus bordes activados, y las líneas se alinearán correctamente.
El único problema restante es tener en cuenta esa sombra paralela arruinada. Ese es un ejercicio diferente.
Una mejor manera sería una cuadrícula de 9 donde tiene las esquinas de fondo y los fondos superior, inferior, izquierdo y derecho repitiendo
Tu tabla va en la celda 5
Editar
Como algunos publicaron en los comentarios, no puede lograr el efecto con una cuadrícula de 9. Tienes que hacer un sistema de 12 cuadrículas (creado por mí ahora :)
Demo en vivo
.
Código:
Advertencia: no es bonito, pero funciona
<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: hay algunos espacios que no se rompen que SO elimina del código. Mira la demostración en vivo para más información
¡Disfruta!
