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

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

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 .

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; 
}

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/

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>

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.

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.

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!

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.

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;
}

O use box-shadow si la tabla se ha colapsado

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;