Aplicar estilos a tablas con Twitter Bootstrap
¿Alguien sabe si es posible aplicar estilos en tablas con Twitter Bootstrap? Puedo ver algunos ejemplos de tablas en algunos tutoriales más antiguos, pero no en el propio sitio de Bootstrap.
He intentado configurarlo, pero las tablas de mi página no tienen casi ningún estilo aplicado a ellas.
<table>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Language</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Some</td>
<td>One</td>
<td>English</td>
</tr>
<tr>
<td>2</td>
<td>Joe</td>
<td>Sixpack</td>
<td>English</td>
</tr>
</tbody>
</table>
¿Qué clases necesito aplicar?
6 answers
Bootstrap ofrece varios estilos de tabla. Eche un vistazo a Base CSS - Tables para obtener documentación y ejemplos.
El siguiente estilo da tablas de gran aspecto:
<table class="table table-striped table-bordered table-condensed">
...
</table>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-08-26 17:32:12
Las tablas bootstrap de Twitter pueden ser estilizadas y bien diseñadas. Puedes darle estilo a tu mesa simplemente agregando algunas clases en tu mesa y se verá bien. Puede usarlo en sus informes de datos, mostrando información, etc.
Puedes usar:
basic table
Striped rows
Bordered table
Hover rows
Condensed table
Contextual classes
Responsive tables
Tabla de filas rayadas:
<table class="table table-striped" width="647">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Address</th>
<th>mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Thomas bell</td>
<td>Brick lane, London</td>
<td>[email protected]</td>
</tr>
<tr>
<td height="29">2</td>
<td>Yan Chapel</td>
<td>Toronto Australia</td>
<td>[email protected]</td>
</tr>
<tr>
<td>3</td>
<td>Pit Sampras</td>
<td>Berlin, Germany</td>
<td>Pit @yahoo.com</td>
</tr>
</tbody>
</table>
Tabla condensada:
Compactar una tabla debe agregar class class="table table-condensed" .
<table class="table table-condensed" width="647">
<thead>
<tr>
<th>#</th>
<th>Sample Name</th>
<th>Address</th>
<th>Mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Thomas bell</td>
<td>Brick lane, London</td>
<td>[email protected]</td>
</tr>
<tr>
<td height="29">2</td>
<td>Yan Chapel</td>
<td>Toronto Australia</td>
<td>[email protected]</td>
</tr>
<tr>
<td>3</td>
<td>Pit Sampras</td>
<td>Berlin, Germany</td>
<td>Pit @yahoo.com</td>
</tr>
<tr>
<td></td>
<td colspan="3" align="center"></td>
</tr>
</tbody>
</table>
Ref : http://twitterbootstrap.org/twitter-bootstrap-table-example-tutorial
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-10-01 17:29:13
También puede aplicar clases TR: info, error, warning o success.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-03-12 19:09:57
Solo otra buena mesa. He añadido la clase" table-hover " porque da un buen efecto de suspensión.
<h3>NATO Phonetic Alphabet</h3>
<table class="table table-striped table-bordered table-condensed table-hover">
<thead>
<tr>
<th>Letter</th>
<th>Phonetic Letter</th>
</tr>
</thead>
<tr>
<th>A</th>
<th>Alpha</th>
</tr>
<tr>
<td>B</td>
<td>Bravo</td>
</tr>
<tr>
<td>C</td>
<td>Charlie</td>
</tr>
</table>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-07-26 21:49:22
Bootstrap proporciona varias clases para la tabla
<table class="table"></table>
<table class="table table-bordered"></table>
<table class="table table-hover"></table>
<table class="table table-condensed"></table>
<table class="table table-responsive"></table>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-06-03 20:29:16
Puede Agregar clases contextuales a cada fila de la siguiente manera:
<tr class="table-success"></tr>
<tr class="table-error"></tr>
<tr class="table-warning"></tr>
<tr class="table-info"></tr>
<tr class="table-danger"></tr>
También puede agregarlos a los datos de la tabla igual que los anteriores
Puede establecer el tamaño de su tabla estableciendo clases como table-sm y así sucesivamente.
Puede agregar clases personalizadas y agregar su propio estilo:
<table class="table">
<thead style = "color:red;background-color:blue">
<tr>
<th></th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Asdf</td>
<td>qwerty</td>
</tr>
</tbody>
</table>
De esta manera puede agregar un estilo personalizado. He mostrado el estilo en línea, por ejemplo, cómo funciona, puede agregar clases y llamarlas en su css también.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-08-10 10:08:53