Cómo agregar el radio del borde en la fila de la tabla

108

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

Henson
fuente

Respuestas:

221

Solo puede aplicar border-radius a td, no a tr o table. He solucionado esto para las tablas de esquinas 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 de proveedores. Aquí tienes un ejemplo en acción .

theazureshadow
fuente
Correcto. Si desea esquinas redondeadas en IE, tendrá que usar imágenes y marcas extrañas.
theazureshadow
6
@Henson: No, no lo hará porque CSS3 no es compatible con IE <9, sin embargo, puede usar CSS3PIE para que funcione en IE, incluido IE6: css3pie.com
Sarfraz
31
Advertencia: si omite border-collapse: separate;, esto no funcionará.
Kevin Borders
@KevinBorders que es incorrecto, al menos en Chrome v39. Tuve un problema para que esto funcionara cuando apliqué el color de fondo a la tabla. Aparentemente debe estar en los elementos tr o td.
Big McLargeHuge
1
separatees necesario para Chrome 44.
Hugh Guiney
38

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-radiusen 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-coloren los radios del borde ).

El código es el siguiente (y como señaló azureshadow, para el soporte anterior del navegador, se border-radiusagregaron los diversos prefijos de proveedores para la necesidad).

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; 
}
ScottS
fuente
3
Mucho mejor que la respuesta anterior.
Exzile
12

Información adicional: border-radiusno tiene ningún efecto en las tablas con un border-collapse: collapse;borde establecido en td's. Y no importa si border-radiusse encuentra en table, tro td-Es ignorados.

http://jsfiddle.net/Exe3g/

Ronni Egeriis Persson
fuente
El jsfiddle tiene esquinas redondeadas en Firefox.
Jukka K. Korpela
4
@ JukkaK.Korpela Sí, si la frontera colapsa: colapso; no está configurado, haga clic en el botón de alternancia y observe cómo sucede la magia.
Ronni Egeriis Persson
3

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>

felizfunball
fuente
4
Cambiar la propiedad de visualización del TR a "bloquear" probablemente estropeará el diseño de la tabla. En particular, si su tabla tiene varias filas que contienen varias longitudes de contenido, las celdas de la tabla no se alinearán.
Jess
2

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-childy last-childcomo 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-columny .last-columnpara cumplir este propósito.

levik
fuente
Colapso el borde para que tr pueda mostrar el estilo que le doy. Probaré el método de clase. pero ¿qué pasa con el margen? Intenté usar el espaciado de bordes para mostrar los márgenes entre las filas, pero creo que esa no es la mejor manera de hacerlo ...
Henson
No puede haber márgenes entre las filas si comparten un borde, es decir, cuando el borde está contraído. Supongo que lo que está tratando de hacer es conseguir que sus TR tengan un color de fondo con esquinas redondeadas. Si es así,
deshacerlos
en realidad, lo más urgente es mostrar el margen entre las filas con bordes. Sin embargo, el borde no necesariamente tiene que tener esquinas redondeadas
Henson
2

Según Opera, el estándar CSS3 no define el uso de border-radiusen 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 aplicarlo border-radiusal div.

Rayo
fuente
2

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:

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 los acolchados, radios, etc. para satisfacer sus necesidades. ¡Espero que ayude a la gente!

Mathieu Turcotte
fuente
1

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.

<div class="tableWrapper">
  <table>
    <tr><td>Content</td></tr>
  <table>
</div>

.tableWrapper {
  border-radius: 4px;
  overflow: hidden;
}

Si su mesa no lo es width: 100%, puede hacer su envoltorio float: left, solo recuerde limpiarlo.

ScubaSteve
fuente
solución simple y elegante
ufk
1

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/

<table>
  <tr>
    <th>title 1</th>
    <th>title 2</th>
    <th>title 3</th>
  </tr>
  <tr>
    <td>item 1</td>
    <td>item 2</td>
    <td>item 3</td>
  </tr>
  <tr>
    <td>item 1</td>
    <td>item 2</td>
    <td>item 3</td>
  </tr>
  <tr>
    <td>item 1</td>
    <td>item 2</td>
    <td>item 3</td>
  </tr>
  <tr>
    <td>item 1</td>
    <td>item 2</td>
    <td>item 3</td>
  </tr>
</table>
table {
  border-collapse: seperate;
  border-spacing: 0;
}

tr th,
tr td {
  padding: 20px;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
}

tr th {
  border-top: 1px solid #000;
}

tr td:nth-child(1),
tr th:nth-child(1) {
  border-left: 1px solid #000;
}

/* border radius */
tr th:nth-child(1) {
  border-radius: 10px 0 0 0;
}

tr th:nth-last-child(1) {
  border-radius: 0 10px 0 0;
}

tr:nth-last-child(1) td:nth-child(1) {
  border-radius: 0 0 0 10px;
}

tr:nth-last-child(1) td:nth-last-child(1) {
  border-radius: 0 0 10px 0;
}
John Fotios
fuente
0

O use box-shadow si la tabla se ha colapsado

Siviy
fuente
0

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.

border: xStyle xColor xSize;
border-collapse: collapse;
border-radius: 1em;
overflow: hidden;
E Alexis MT
fuente
@ypresto, la respuesta principal de #theazureshadow menciona que el radio del borde no funciona para tr, pero la razón es porque ni siquiera se le puede aplicar un borde, pero la tabla funciona :( No sé por qué, pero esa respuesta es de 2013 .
E Alexis MT