hojas - plantillas css para tablas
Cómo agregar un radio de borde en la fila de la tabla (9)
Espaciado real entre filas
Este es un hilo viejo, pero noté leer los comentarios del OP en otras respuestas que el objetivo original aparentemente era tener border-radius en las filas y espacios entre las filas. No parece que las soluciones actuales hagan exactamente eso. La respuesta de theazureshadow se dirige en la dirección correcta, pero parece necesitar un poco más.
Para aquellos interesados en tal, aquí hay un violín que separa las filas y aplica el radio a cada fila. (NOTA: Firefox actualmente tiene un error al mostrar / recortar background-color en los radios fronterizos ).
El código es el siguiente (y como se ha indicado theazureshadow, para una compatibilidad anterior con el navegador, se deben agregar los diversos prefijos de proveedor para border-radius ).
table {
border-collapse: separate;
border-spacing: 0 10px;
margin-top: -10px; /* correct offset on first border spacing if desired */
}
td {
border: solid 1px #000;
border-style: solid none;
padding: 10px;
background-color: cyan;
}
td:first-child {
border-left-style: solid;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
td:last-child {
border-right-style: solid;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
}
¿Alguien sabe cómo estilo tr como nos gusta?
He usado el colapso de borde en la tabla, después de que tr''s puede mostrar un borde sólido de 1 píxel que les doy.
Sin embargo, cuando he intentado -moz-border-radius , no funciona. Incluso el margen simple no funciona.
Creo que colapsar tus fronteras es lo que no debes hacer en este caso. Al derrumbarse, básicamente significa que el límite entre dos celdas vecinas se comparte. Esto significa que no está claro en qué dirección debe curvarse dado un radio.
En su lugar, puede dar un radio de borde a las dos esquinas izquierdas de la primera TD y las dos esquinas de la derecha de la última. Puede usar los selectores de first-child y last-child según lo sugerido por theazureshadow, pero es posible que las versiones anteriores de IE no lo admitan. Puede ser más fácil simplemente definir clases, como .first-column y .last-column para cumplir este propósito.
Descubrí que agregar border-radius a tables, trs y tds no parece funcionar al 100% en las últimas versiones de Chrome, FF e IE. Lo que hago en cambio es, envuelvo la mesa con un div y le pongo el radio del borde.
<div class="tableWrapper">
<table>
<tr><td>Content</td></tr>
<table>
</div>
.tableWrapper {
border-radius: 4px;
overflow: hidden;
}
Si su tabla no tiene width: 100% , puede hacer que su contenedor float: left , solo recuerde despejarlo.
El elemento tr respeta el radio del borde. Puede usar html y css puros, sin javascript.
Enlace JSFiddle: http://jsfiddle.net/pflies/zL08hqp1/10/
tr {
border: 0;
display: block;
margin: 5px;
}
.solid {
border: 2px red solid;
border-radius: 10px;
}
.dotted {
border: 2px green dotted;
border-radius: 10px;
}
.dashed {
border: 2px blue dashed;
border-radius: 10px;
}
td {
padding: 5px;
}
<table>
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
</tr>
<tr class=''dotted''>
<td>07</td>
<td>08</td>
<td>09</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr class=''solid''>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
</tr>
<tr class=''dotted''>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr class=''dashed''>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
</tr>
</table>
Información de bonificación: border-radius no tiene ningún efecto en las tablas con border-collapse: collapse; y borde establecido en td ''s. Y no importa si border-radius está establecido en la table , tr o td -it es ignorado.
No estoy tratando de tomar ningún crédito aquí, todo el crédito va a @theazureshadow por su respuesta, pero personalmente tuve que adaptarlo para una tabla que tiene alguna <th> lugar de <td> para las celdas de la primera fila.
Acabo de publicar la versión modificada aquí en caso de que algunos de ustedes quieran usar la solución de @ theazureshadow, pero como yo, tienen algo de <th> en el primer <tr> . La clase "reportTable" solo debe aplicarse a la tabla en sí:
table.reportTable {
border-collapse: separate;
border-spacing: 0;
}
table.reportTable td {
border: solid gray 1px;
border-style: solid none none solid;
padding: 10px;
}
table.reportTable td:last-child {
border-right: solid gray 1px;
}
table.reportTable tr:last-child td{
border-bottom: solid gray 1px;
}
table.reportTable th{
border: solid gray 1px;
border-style: solid none none solid;
padding: 10px;
}
table.reportTable th:last-child{
border-right: solid gray 1px;
border-top-right-radius: 10px;
}
table.reportTable th:first-child{
border-top-left-radius: 10px;
}
table.reportTable tr:last-child td:first-child{
border-bottom-left-radius: 10px;
}
table.reportTable tr:last-child td:last-child{
border-bottom-right-radius: 10px;
}
Siéntase libre de ajustar las almohadillas, radios, etc. para satisfacer sus necesidades. Espero que ayude a la gente!
O use box-shadow si la tabla se colapsó
Según Opera el estándar CSS3 no define el uso de border-radius en TDs. Mi experiencia es que Firefox y Chrome lo admiten pero Opera no (no sabe sobre IE). La solución es envolver el contenido de td en un div y luego aplicar el border-radius del border-radius al div.
Solo puede aplicar border-radius a td, not tr o table. Lo he solucionado para las tablas de esquina redondeadas usando estos estilos:
table { border-collapse: separate; }
td { border: solid 1px #000; }
tr:first-child td:first-child { border-top-left-radius: 10px; }
tr:first-child td:last-child { border-top-right-radius: 10px; }
tr:last-child td:first-child { border-bottom-left-radius: 10px; }
tr:last-child td:last-child { border-bottom-right-radius: 10px; }
Asegúrese de proporcionar todos los prefijos del vendedor. Aquí hay un ejemplo de esto en acción .