K
Kuroro1990
Alfa
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Hola a todos!!
Estoy tratando de crear una tabla (HTML) y dandole estilo con CSS por medio de una clase.
Cree una tabla con una aplicación online para crear tablas con estilos css3, las aplique en mi web de prueba, y la he ido modificando un poco.
El problema y dudas que tengo es que al momento de darle una dimensión definida a la tabla, el estilo del borde externo y el sombreado externo no se acomodan al tamaño que trato de asignarle.
Las filas y celdas si se acomodan al ancho total que le asigno a la tabla, pero como mencioné, el estilo del borde del contorno y el sombreado no lo hacen.
Me imagino, y aquí mi duda, que el ancho se le aplica directamente a la tabla con un style="width: XXXpx;", y no en el css. Pero como no ha funcionado no sé que estaré haciendo mal, o que está mal en el código.
Espero que alguien me pueda ayudar con este problemita 🙂
Aquí el código
Este es el codigo de la tabla
Estoy tratando de crear una tabla (HTML) y dandole estilo con CSS por medio de una clase.
Cree una tabla con una aplicación online para crear tablas con estilos css3, las aplique en mi web de prueba, y la he ido modificando un poco.
El problema y dudas que tengo es que al momento de darle una dimensión definida a la tabla, el estilo del borde externo y el sombreado externo no se acomodan al tamaño que trato de asignarle.
Las filas y celdas si se acomodan al ancho total que le asigno a la tabla, pero como mencioné, el estilo del borde del contorno y el sombreado no lo hacen.
Me imagino, y aquí mi duda, que el ancho se le aplica directamente a la tabla con un style="width: XXXpx;", y no en el css. Pero como no ha funcionado no sé que estaré haciendo mal, o que está mal en el código.
Espero que alguien me pueda ayudar con este problemita 🙂
Aquí el código
Insertar CODE, HTML o PHP:
.datagrid table {
border-collapse: collapse;
text-align: left;
width: 100%;
}
.datagrid {
font: normal 12px/100% Geneva, Arial, Helvetica, sans-serif;
background: #f6fff5;
overflow: hidden;
border: 4px solid #0a5000;
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
box-shadow: 5px 5px 8px #111;
}
.datagrid table td, .datagrid table th { padding: 6px 6px; }
.datagrid table thead th {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #28cf10), color-stop(1, #275420) );
background:-moz-linear-gradient( center top, #49a83b 5%, #094200 90% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#28cf10', endColorstr='#275420');
background-color:#36752D;
color: #fff;
font-size: 20px;
text-align: center;
font-weight: normal;
padding: 10px 10px;
border-left: 1px solid #139800;
}
.datagrid table thead th:first-child { border: none; }
.datagrid table tbody td {
color: #000;
border-left: 1px solid #55a749;
font-size: 15px;
border-bottom: 1px solid #55a749;
font-weight: normal;
}
.datagrid table tbody td:first-child { border-left: none; }
.datagrid table tbody tr:last-child td { border-bottom: none; }
tr:nth-child(2n+1) { background-color: #e0ffdd; }Este es el codigo de la tabla
Insertar CODE, HTML o PHP:
<div class="datagrid">
<table>
<thead>
<tr>
<th colspan="2">header</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
<td>data datada data
data data data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
</tbody>
</table>
</div>
Última edición: