Quiero añadir un borde redondeado alrededor de toda la mesa. Pero el siguiente código no funciona en las últimas versiones de Firefox y Google Chrome.

HTML

<table class="bordered">
    <thead>
        <tr>
            <th><label>Labels</label></th>
            <th><label>Labels</label></th>
            <th><label>Labels</label></th>
            <th><label>Labels</label></th>
            <th><label>Labels</label></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><label>Value</label></td>
            <td><label>Value</label></td>
            <td><label>Value</label></td>
            <td><label>Value</label></td>
            <td><label>Value</label></td>                            
        </tr>
    </tbody>                    
</table>

CSS

table {
border-spacing: 0;
width: 600px;
margin: 30px;
border: 1px solid #CCCCCC;
border-radius: 6px 6px 6px 6px;
-moz-border-radius: 6px 6px 6px 6px;
-webkit-border-radius: 6px 6px 6px 6px;
box-shadow: 0 1px 1px #CCCCCC;
}        
table th:first-child {
border-radius: 6px 0 0 0;
-moz-border-radius: 6px 0 0 0;
-webkit-border-radius: 6px 0 0 0;
}
table th:last-child {
border-radius: 0 6px 0 0;
-moz-border-radius: 0 6px 0 0;
-webkit-border-radius: 0 6px 0 0;
}
table td:first-child, .bordered th:first-child {
border-left: medium none;
}
table th {
background-color: #DCE9F9;
background-image: -moz-linear-gradient(center top , #F8F8F8, #ECECEC);
background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#F8F8F8), to(#ECECEC), color-stop(.4, #F8F8F8));
border-top: medium none;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
table td, table th {
border-left: 1px solid #CCCCCC;
border-top: 1px solid #CCCCCC;
padding: 10px;
text-align: left;
}

jsFiddle

InformationsquelleAutor Tapas Bose | 2012-05-19

5 Comentarios

  1. 41

    Funciona, este es un problema con la herramienta que se utiliza: normalizado CSS por jsFiddle está causando el problema por ocultar el defecto de los navegadores…

    Ver http://jsfiddle.net/XvdX9/5/

    EDICIÓN:

    normalizar.css hoja de estilos de jsFiddle agrega la instrucción border-collapse: collapse a todas las mesas y se hace de manera completamente diferente en CSS2.1:

    Diferencias entre los 2 modelos se puede ver en este otro violín: http://jsfiddle.net/XvdX9/11/ (con algunas transparencias en las células y una enorme «border-radius» en la parte superior izquierda, con el fin de ver lo que sucede en la mesa vs sus células)

    En el mismo CSS2.1 página acerca de las tablas en HTML, también hay explicaciones acerca de lo que los navegadores deberían/podrían hacer con el vacío de las células en el apartado de las fronteras del modelo, la diferencia entre border-style: none y border-style: hidden en la caída de las fronteras del modelo, cómo anchura se calcula y que la frontera debe mostrar si tanto la tabla, fila y celda elementos que definen 3 estilos diferentes en la misma frontera.

    • Puede usted explicar por qué normalizar las causas de este problema? Cuando me inspeccionar los elementos, el violín, no puedo encontrar nada de lo que iba a matar a la border-radius.
    • Gracias. También he encontrado la siguiente solución. 🙂
    • He añadido enlaces a los documentos y la comparación. Me alegro de haber aprendido directamente de CSS hace un par de años y no trabajo en el campo de la espalda cuando el diseño de la mesa fueron: (a) uso y abuso junto con spacer.gif 😉
    • overflow debe establecer hidden si desea border-radius a afectar al contenido de la
    • Que va a «cortar» rectangular fondos en las células, de forma similar a una máscara, una buena idea si usted está seguro de nada nunca tendrá que mostrar fuera de una tabla (más simple que el border-radius en 4 celdas de esquina). Pero a menudo tengo la información de herramientas o incluso, en el complejo tablas, listas desplegables (filtros, etc)
  2. 69

    border-collapse: separate !important; trabajado.

    Gracias.

    HTML

    <table class="bordered">
        <thead>
            <tr>
                <th><label>Labels</label></th>
                <th><label>Labels</label></th>
                <th><label>Labels</label></th>
                <th><label>Labels</label></th>
                <th><label>Labels</label></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><label>Value</label></td>
                <td><label>Value</label></td>
                <td><label>Value</label></td>
                <td><label>Value</label></td>
                <td><label>Value</label></td>                            
            </tr>
        </tbody>                    
    </table>

    CSS

    table {
    border-collapse: separate !important;
    border-spacing: 0;
    width: 600px;
    margin: 30px;
    }
    .bordered {
    border: solid #ccc 1px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 1px 1px #ccc;
    -moz-box-shadow: 0 1px 1px #ccc;
    box-shadow: 0 1px 1px #ccc;
    }
    .bordered tr:hover {
    background: #ECECEC;    
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
    }
    .bordered td, .bordered th {
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    padding: 10px;
    text-align: left;
    }
    .bordered th {
    background-color: #ECECEC;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#F8F8F8), to(#ECECEC));
    background-image: -webkit-linear-gradient(top, #F8F8F8, #ECECEC);
    background-image: -moz-linear-gradient(top, #F8F8F8, #ECECEC);    
    background-image: linear-gradient(top, #F8F8F8, #ECECEC);
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
    border-top: none;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
    }
    .bordered td:first-child, .bordered th:first-child {
    border-left: none;
    }
    .bordered th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
    }
    .bordered th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
    }
    .bordered th:only-child{
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
    }
    .bordered tr:last-child td:first-child {
    -moz-border-radius: 0 0 0 6px;
    -webkit-border-radius: 0 0 0 6px;
    border-radius: 0 0 0 6px;
    }
    .bordered tr:last-child td:last-child {
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    border-radius: 0 0 6px 0;
    } 

    jsFiddle

    • border-collapse: separate !importante; Sí trabajó también para mí.
  3. 6

    Una nota a esta antigua pregunta:

    Mi reset.css había establecido border-spacing: 0, causando las esquinas para obtener cortado. Tuve que configurarlo para que 3px para mi radio para que funcione correctamente (valor dependerá de la radio en cuestión).

    • esto no me funciona en Chrome.
  4. 6
    <div class="leads-search-table">
    <div class="row col-md-6 col-md-offset-2 custyle">
    <table class="table custab bordered">
    <thead>
    <tr>
    <th>ID</th>
    <th>Title</th>
    <th>Parent ID</th>
    <th class="text-center">Action</th>
    </tr>
    </thead>
    <tr>
    <td>1</td>
    <td>News</td>
    <td>News Cate</td>
    <td class="text-center"><a class='btn btn-info btn-xs' href="#"><span class="glyphicon glyphicon-edit"></span> Edit</a> <a href="#" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span> Del</a></td>
    </tr>
    <tr>
    <td>2</td>
    <td>Products</td>
    <td>Main Products</td>
    <td class="text-center"><a class='btn btn-info btn-xs' href="#"><span class="glyphicon glyphicon-edit"></span> Edit</a> <a href="#" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span> Del</a></td>
    </tr>
    <tr>
    <td>3</td>
    <td>Blogs</td>
    <td>Parent Blogs</td>
    <td class="text-center"><a class='btn btn-info btn-xs' href="#"><span class="glyphicon glyphicon-edit"></span> Edit</a> <a href="#" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span> Del</a></td>
    </tr>
    </table>
    </div>
    </div>

    Css

    .custab{
    border: 1px solid #ccc;
    margin: 5% 0;
    transition: 0.5s;
    background-color: #fff;
    -webkit-border-radius:4px;
    border-radius: 4px;
    border-collapse: separate;
    }
  5. 6

    Esta es mi solución con el contenedor, sólo la eliminación de border-collapse podría no ser útil siempre, porque es posible que desee tener fronteras.

    CSS:

    .wrapper {
    overflow: auto;
    border-radius: 6px;
    border: 1px solid red;
    }
    table {
    border-spacing: 0;
    border-collapse: collapse;
    border-style: hidden;
    width:100%;
    max-width: 100%;
    }
    th, td {
    padding: 10px;
    border: 1px solid #CCCCCC;
    }

    HTML:

    <div class="wrapper">
    <table>
    <thead>
    <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>Foo Bar boo</td>
    <td>Lipsum</td>
    <td>Beehuum Doh</td>
    </tr>
    <tr>
    <td>Dolor sit</td>
    <td>ahmad</td>
    <td>Polymorphism</td>
    </tr>
    <tr>
    <td>Kerbalium</td>
    <td>Caton, gookame kyak</td>
    <td>Corona Premium Beer</td>
    </tr>
    </tbody>
    </table>  
    </div>

    Este artículo ayudó: https://css-tricks.com/table-borders-inside/

Dejar respuesta

Please enter your comment!
Please enter your name here