¿Alguien sabe cómo peinar tr como nos gusta?
He usado border-collapse en la tabla, después de eso, los tr pueden mostrar un borde sólido de 1px que les doy.
Sin embargo, cuando lo he intentado -moz-border-radius
, no funciona. Incluso el margen simple no funciona.
border-collapse: separate;
, esto no funcionará.separate
es necesario para Chrome 44.Espaciado real entre filas
Este es un hilo antiguo, pero noté que al leer los comentarios del OP sobre otras respuestas, el objetivo original aparentemente era tener
border-radius
en las filas y los espacios entre las filas. No parece que las soluciones actuales hagan exactamente eso. La respuesta de theazureshadow va en la dirección correcta, pero parece necesitar un poco más.Para aquellos interesados en eso, 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 del borde ).El código es el siguiente (y como señaló azureshadow, para el soporte anterior del navegador, se
border-radius
agregaron los diversos prefijos de proveedores para la necesidad).fuente
Información adicional:
border-radius
no tiene ningún efecto en las tablas con unborder-collapse: collapse;
borde establecido entd
's. Y no importa siborder-radius
se encuentra entable
,tr
otd
-Es ignorados.http://jsfiddle.net/Exe3g/
fuente
El elemento tr respeta el radio del borde. Puede usar html y css puros, sin javascript.
Enlace JSFiddle: http://jsfiddle.net/pflies/zL08hqp1/10/
fuente
Creo que colapsar sus fronteras no es lo correcto en este caso. Colapsarlos básicamente significa que la frontera entre dos celdas vecinas se vuelve compartida. Esto significa que no está claro en qué dirección debería curvarse dado un radio.
En su lugar, puede dar un radio de borde a las dos esquinas de la izquierda del primer TD y las dos esquinas de la derecha del último. Puede usar los selectores
first-child
ylast-child
como sugiere theazureshadow, pero es posible que no sean compatibles con versiones anteriores de IE. Podría ser más fácil simplemente definir clases, como.first-column
y.last-column
para cumplir este propósito.fuente
Según Opera, el estándar CSS3 no define el uso de
border-radius
en TD. Mi experiencia es que Firefox y Chrome lo admiten, pero Opera no (no sé sobre IE). La solución consiste en envolver el contenido td en un div y luego aplicarloborder-radius
al div.fuente
Al no intentar tomar ningún crédito aquí, todo el crédito es para @theazureshadow por su respuesta, pero personalmente tuve que adaptarlo para una tabla que tiene algunos en
<th>
lugar de<td>
para las celdas de la primera fila.Solo estoy publicando la versión modificada aquí en caso de que algunos de ustedes quieran usar la solución de @ theazureshadow, pero como yo, tengo algunas
<th>
en la primera<tr>
. La clase "reportTable" solo tiene que aplicarse a la propia tabla:Siéntase libre de ajustar los acolchados, radios, etc. para satisfacer sus necesidades. ¡Espero que ayude a la gente!
fuente
Descubrí que agregar border-radius a tablas, trs y tds no parece funcionar al 100% en las últimas versiones de Chrome, FF e IE. En cambio, lo que hago es envolver la tabla con un div y poner el radio del borde en él.
Si su mesa no lo es
width: 100%
, puede hacer su envoltoriofloat: left
, solo recuerde limpiarlo.fuente
Utilice border-collapse: por separado; y espaciado de bordes: 0; pero solo use border-right y border-bottom para los tds, con border-top aplicado a th y border-left aplicado solo a tr td: nth-child (1).
Luego puede aplicar el radio del borde a las esquinas tds (usando nth-child para encontrarlos)
https://jsfiddle.net/j4wm1f29/
fuente
O use box-shadow si la tabla se ha colapsado
fuente
Todas las respuestas son demasiado largas. La forma más fácil de agregar un radio de borde a un elemento de tabla que acepta borde como propiedad es hacer un radio de borde con overflow: hidden.
fuente