css3 - redondeados - redondeado de esquinas

Tablas redondeadas en Twitter Bootstrap 3

Question

Bootstrap 3 ha dejado las esquinas redondeadas en las tablas. ¿Qué estilos debo aplicar para recuperarlos cuando aplique la clase .table-bordered , por favor?

ACTUALIZAR

Hasta ahora he llegado a este código, sin ningún efecto.

CSS tomado de Bootstrap 2.3.2:

.table-bordered
{
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.table-bordered thead:first-child tr:first-child > th:first-child, .table-bordered tbody:first-child tr:first-child > td:first-child, .table-bordered tbody:first-child tr:first-child > th:first-child
{
    -webkit-border-top-left-radius: 4px;
    border-top-left-radius: 4px;
    -moz-border-radius-topleft: 4px;
}

.table-bordered thead:last-child tr:last-child > th:first-child, .table-bordered tbody:last-child tr:last-child > td:first-child, .table-bordered tbody:last-child tr:last-child > th:first-child, .table-bordered tfoot:last-child tr:last-child > td:first-child, .table-bordered tfoot:last-child tr:last-child > th:first-child
{
    -webkit-border-bottom-left-radius: 4px;
    border-bottom-left-radius: 4px;
    -moz-border-radius-bottomleft: 4px;
}

Código HTML:

<table class="table table-hover table-responsive table-bordered">
    <thead>
        <tr>
            <th style="width: 50%">
                Config. Name
            </th>
            <th>
                API Calls
            </th>
            <th>
                Current Amount
            </th>
            <th>
                Actions
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <a href="/searchsources/details">Agennda</a>
            </td>
            <td>
                2,876
            </td>
            <td>
                $ 80.67
            </td>
            <td>
                <a href="/searchsources/details">Edit</a>
            </td>
        </tr>
    </tbody>
</table>

Answer 1

"table-responsive" va en un div que envuelve la tabla, no en la tabla misma.

En normalize.less está la restauración de la tabla que incluye border-collapse: colapso. Esto no estaba en el 2.x de Bootstrap. Debido a este nuevo reinicio, no hay esquinas redondeadas, ya que tienen que estar en el borde del colapso: por separado. Tienes que hacer una clase separada y configurarla en consecuencia.

       <table class="table table-curved">

Solo funciona con "table-hover" y "table-striped" NOT table-confdered. Las fronteras están incluidas en este estilo.

.table-curved {
    border-collapse: separate;
}
.table-curved {
    border: solid #ccc 1px;
    border-radius: 6px;
    border-left:0px;
}
.table-curved td, .table-curved th {
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
}
.table-curved th {
    border-top: none;
}
.table-curved th:first-child {
    border-radius: 6px 0 0 0;
}
.table-curved th:last-child {
    border-radius: 0 6px 0 0;
}
.table-curved th:only-child{
    border-radius: 6px 6px 0 0;
}
.table-curved tr:last-child td:first-child {
    border-radius: 0 0 0 6px;
}
.table-curved tr:last-child td:last-child {
    border-radius: 0 0 6px 0;
}

MENOS

  //  Added Rounded Corner Tables 
.table-curved {
  border-collapse: separate;
  border: solid @table-border-color 1px;
  border-radius: @table-radius;
  border-left:0px;

    td, th {
      border-left: 1px solid @table-border-color;
      border-top: 1px solid @table-border-color;
    }

    th {
      border-top: none;
    }

    th:first-child {
      border-radius: @table-radius 0 0 0;
    }

    th:last-child {
      border-radius: 0 @table-radius 0 0;
    }

    th:only-child{
      border-radius: @table-radius @table-radius 0 0;
    }

    tr:last-child td:first-child {
      border-radius: 0 0 0 @table-radius;
    }

    tr:last-child td:last-child {
      border-radius: 0 0 @table-radius 0;
    }
}

Answer 2

El siguiente funciona muy bien para mí:

.table-curved {
    border-collapse: separate;
}
.table-curved {
    border: solid #ccc 1px;
    border-radius: 6px;
}
.table-curved td, .table-curved th {
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
}
.table-curved tr > *:first-child {
    border-left: 0px;
}
.table-curved tr:first-child > * {
    border-top: 0px;
}

Aunque, por supuesto, no funciona para tablas anidadas.

Answer 3

Esta es otra solución que puede ser mucho más simple que las anteriores. Esto seleccionará los primeros y últimos elementos th y aplicará un borde a sus respectivas esquinas. Luego puede agregar un radio a la tabla general.

.table {
  border-radius: 5px;
}
th:first-of-type {
  border-top-left-radius: 5px;
}
th:last-of-type {
  border-top-right-radius: 5px;
}

Answer 4

La respuesta anterior sobre el ajuste de la tabla con un panel ( <div class="panel panel-default"> ) parece funcionar mejor.

Sin embargo, como se menciona en los comentarios, es necesario eliminar el borde superior de la tabla.

Usé este SCSS para hacer esto, así que pensé en compartir:

// remove extra top border on tables wrapped in a panel
.panel {
  & > .table-responsive > .table.table-bordered, & > .table.table-bordered {
    & > tbody:first-child, & > thead:first-child {
      & > tr:first-child {
        td, th {
          border-top: none;
        }
      }
    }
  }
}

Answer 5

Por el bien de bootstrappiness:

.table-curved {
    border-collapse: separate;
    border: solid @table-border-color 1px;
    border-radius: @border-radius-base;
    border-left: 0px;
    border-top: 0px;
    > thead:first-child > tr:first-child > th {
        border-bottom: 0px;
        border-top: solid @table-border-color 1px;
    }
    td, th {
        border-left: 1px solid @table-border-color;
        border-top: 1px solid @table-border-color;
    }
    > :first-child > :first-child > :first-child {
        border-radius: @border-radius-base 0 0 0;
    }
    > :first-child > :first-child > :last-child {
        border-radius: 0 @border-radius-base 0 0;
    }
    > :last-child > :last-child > :first-child {
        border-radius: 0 0 0 @border-radius-base;
    }
    > :last-child > :last-child > :last-child {
        border-radius: 0 0 @border-radius-base 0;
    }
}

Answer 6

Si rodeas la mesa con un panel, obtienes tus esquinas redondeadas.

Me gusta esto:

<div class="panel panel-default">
    <table class="table table-bordered">
        ....
    </table>
</div>

Answer 7

Si solo tiene 1 celda en la primera fila o en la última fila, esta funcionará.

(Se agregó una solución al código de: Ruben Stolk)

.table-curved {
  border-collapse: separate;
  border: solid @table-border-color 1px;
  border-radius: @border-radius-base;
  border-left: 0px;
  border-top: 0px;
  > thead:first-child > tr:first-child > th {
    border-bottom: 0px;
    border-top: solid @table-border-color 1px;
  }
  td, th {
    border-left: 1px solid @table-border-color;
    border-top: 1px solid @table-border-color;
  }
  > :first-child > :first-child > :first-child {
    border-radius: @border-radius-base 0 0 0;
  }
  > :first-child > :first-child > :last-child {
    border-radius: 0 @border-radius-base 0 0;
  }
  > :first-child > :first-child > :only-child{
    border-radius: @border-radius-base @border-radius-base 0 0;
  }
  > :last-child > :last-child > :first-child {
    border-radius: 0 0 0 @border-radius-base;
  }
  > :last-child > :last-child > :last-child {
    border-radius: 0 0 @border-radius-base 0;
  }
  > :last-child > :last-child > :only-child{
    border-radius: 0 0 @border-radius-base @border-radius-base;
  }
}

Answer 8

Supongo que no está utilizando los archivos de menos origen. Sin embargo, en normalize.less, bootstrap 3.0RC agrega:

// ==========================================================================
// Tables
// ==========================================================================

//
// Remove most spacing between table cells.
//

table {
  border-collapse: collapse;
  border-spacing: 0;
}

Esta cosa de colapso de borde destruye los bordes redondeados en las tablas. Entonces, simplemente anule eso en su borde de tabla, encienda el efecto:

.table-bordered
{
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;

    border-collapse: inherit;
}

Creo que puede funcionar

Answer 9

Usando la respuesta de Christina y este thread , se me ocurrió este CSS para obtener las esquinas redondeadas en tablas con THEAD o sin él.

.table-curved {
   border-collapse: separate;
   border: solid #ccc 1px;
   border-radius: 6px;
   border-left: 0px;
   border-top: 0px;
}
.table-curved > thead:first-child > tr:first-child > th {
    border-bottom: 0px;
    border-top: solid #ccc 1px;
}
.table-curved td, .table-curved th {
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
}
.table-curved > :first-child > :first-child > :first-child {
    border-radius: 6px 0 0 0;
}
.table-curved > :first-child > :first-child > :last-child {
    border-radius: 0 6px 0 0;
}
.table-curved > :last-child > :last-child > :first-child {
    border-radius: 0 0 0 6px;
}
.table-curved > :last-child > :last-child > :last-child {
    border-radius: 0 0 6px 0;
}

Answer 10

Utilice un borde de mesa en forma de curvatura y borde de tabla

.table-bordered-curved {
    border-radius: 4px;
    border-collapse: separate;
    border: solid 1px #ccc;
}

.table-bordered-curved thead tr:last-child th,
.table-bordered-curved thead tr:last-child td {
    border-bottom: solid 1px #ccc;
}

.table-bordered-curved thead tr th,
.table-bordered-curved thead tr td {
    border-bottom: 0;
    border-right: solid 1px #ccc;
}

.table-bordered-curved thead tr th:last-child,
.table-bordered-curved thead tr td:last-child {
    border-right: 0;
}

.table-bordered-curved tbody tr:first-child th,
.table-bordered-curved tbody tr:first-child td {
    border-top: 0;
}

.table-bordered-curved tbody tr td {
    border-right: solid 1px #ccc;
}

.table-bordered-curved tbody tr td:last-child {
    border-right: 0;
}