- Desde
- 8 Dic 2013
- Mensajes
- 26
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:
