html - tag - Hacer una mesa ancha encajar contenedor bootstrap
html title attribute (5)
Añadir estilo a la <td> pareció arreglar esto
<td style ="word-break:break-all;">
Tengo una mesa así:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div class="container">
<div class="panel-body">
<div class="table-responsive">
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th class="col-md-1">Id</th>
<th class="col-md-1">Enabled</th>
<th class="col-md-1">Shortcode</th>
<th class="col-md-1">Keyword</th>
<th class="col-md-1">Session Based</th>
<th class="col-md-1">Application SMS Endpoint</th>
<th class="col-md-2">Application MMS Endpoint</th>
<th class="col-md-2">Date From</th>
<th class="col-md-2">Date To</th>
</tr>
</thead>
<tbody>
<tr>
<td>1502</td>
<td>True</td>
<td>+44123456789</td>
<td>*</td>
<td>False</td>
<td>http://google.com/sms</td>
<td>NOTUSED</td>
<td>10 March 2014 19:04:15</td>
<td>01 January 2100 00:00:00</td>
</tr>
<tr>
<td>1212</td>
<td>True</td>
<td>+44123456789</td>
<td>*</td>
<td>False</td>
<td>http://somewhere.local:8080/</td>
<td>NOTUSED</td>
<td>06 March 2014 14:00:12</td>
<td>04 March 2034 15:20:05</td>
</tr>
<tr>
<td>1023</td>
<td>True</td>
<td>+44123456789</td>
<td>*</td>
<td>False</td>
<td>http://www.google.com/sms</td>
<td>NOTUSED</td>
<td>26 February 2014 16:35:52</td>
<td>01 January 2100 00:00:00</td>
</tr>
<tr>
<td>1464</td>
<td>True</td>
<td>+44123456789</td>
<td>00LONG</td>
<td>False</td>
<td>http://ggole.com</td>
<td>NOTUSED</td>
<td>10 March 2014 07:19:19</td>
<td>10 March 2034 07:19:19</td>
</tr>
<tr>
<td>1450</td>
<td>True</td>
<td>+44123456789</td>
<td>10</td>
<td>False</td>
<td>http://ggole.com</td>
<td>NOTUSED</td>
<td>10 March 2014 04:25:29</td>
<td>10 March 2034 04:25:29</td>
</tr>
<tr>
<td>1384</td>
<td>True</td>
<td>+44123456789</td>
<td>7</td>
<td>False</td>
<td>http://ggole.com</td>
<td>NOTUSED</td>
<td>07 March 2014 04:25:40</td>
<td>07 March 2034 04:25:40</td>
</tr>
<tr>
<td>1397</td>
<td>True</td>
<td>+44123456789</td>
<td>AB</td>
<td>False</td>
<td>http://ggole.com</td>
<td>NOTUSED</td>
<td>07 March 2014 08:39:20</td>
<td>07 March 2034 08:39:20</td>
</tr>
<tr>
<td>1393</td>
<td>True</td>
<td>+44123456789</td>
<td>ABRANTEE</td>
<td>False</td>
<td>http://ggole.com</td>
<td>NOTUSED</td>
<td>07 March 2014 06:59:16</td>
<td>07 March 2034 06:59:16</td>
</tr>
<tr>
<td>1446</td>
<td>True</td>
<td>+44123456789</td>
<td>BREAKFAST</td>
<td>False</td>
<td>http://ggole.com</td>
<td>NOTUSED</td>
<td>08 March 2014 12:03:46</td>
<td>08 March 2034 12:03:46</td>
</tr>
<tr>
<td>1514</td>
<td>True</td>
<td>+44123456789</td>
<td>CAMPAIGN</td>
<td>False</td>
<td>http://ggole.com</td>
<td>NOTUSED</td>
<td>11 March 2014 04:31:50</td>
<td>11 March 2034 04:31:50</td>
</tr>
<tr>
<td>1515</td>
<td>True</td>
<td>+44123456789</td>
<td>CAMPAIGN1</td>
<td>False</td>
<td>http://ggole.com</td>
<td>NOTUSED</td>
<td>11 March 2014 04:47:27</td>
<td>11 March 2034 04:47:27</td>
</tr>
<tr>
<td>1472</td>
<td>True</td>
<td>+44123456789</td>
<td>D</td>
<td>False</td>
<td>http://ggole.com</td>
<td>NOTUSED</td>
<td>10 March 2014 08:26:27</td>
<td>10 March 2034 08:26:27</td>
</tr>
<tr>
<td>1410</td>
<td>True</td>
<td>+44123456789</td>
<td>GJGJTY</td>
<td>False</td>
<td>http://ggole.com</td>
<td>NOTUSED</td>
<td>07 March 2014 10:00:34</td>
<td>07 March 2034 10:00:34</td>
</tr>
<tr>
<td>1390</td>
<td>True</td>
<td>+44123456789</td>
<td>JYJYTJY</td>
<td>False</td>
<td>http://ggole.com</td>
<td>NOTUSED</td>
<td>07 March 2014 05:19:42</td>
<td>07 March 2034 05:19:42</td>
</tr>
<tr>
<td>1322</td>
<td>True</td>
<td>+44123456789</td>
<td>LONGCODE</td>
<td>False</td>
<td>http://ggole.com</td>
<td>NOTUSED</td>
<td>06 March 2014 09:28:39</td>
<td>06 March 2034 09:28:39</td>
</tr>
<tr>
<td>1471</td>
<td>True</td>
<td>+44123456789</td>
<td>LONGCODETHIRTYCAHRACTERKEYWORD</td>
<td>False</td>
<td>http://ggole.com</td>
<td>NOTUSED</td>
<td>10 March 2014 08:26:27</td>
<td>10 March 2034 08:26:27</td>
</tr>
<tr>
<td>1319</td>
<td>True</td>
<td>+44123456789</td>
<td>MARV</td>
<td>False</td>
<td>http://ggole.com</td>
<td>NOTUSED</td>
<td>06 March 2014 08:46:53</td>
<td>06 March 2034 08:46:53</td>
</tr>
<tr>
<td>1503</td>
<td>True</td>
<td>+44123456789</td>
<td>MUM</td>
<td>False</td>
<td>http://www.ff.com/sms</td>
<td>NOTUSED</td>
<td>10 March 2014 19:16:52</td>
<td>17 March 2014 19:16:52</td>
</tr>
<tr>
<td>1447</td>
<td>True</td>
<td>+44123456789</td>
<td>R</td>
<td>False</td>
<td>http://ggole.com</td>
<td>NOTUSED</td>
<td>08 March 2014 12:03:46</td>
<td>08 March 2034 12:03:46</td>
</tr>
<tr>
<td>1281</td>
<td>True</td>
<td>+44123456789</td>
<td>S2</td>
<td>False</td>
<td>http://ggole.com</td>
<td>NOTUSED</td>
<td>06 March 2014 05:31:51</td>
<td>06 March 2034 05:31:51</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Cuando no se aplica CSS, el ancho automático es de 1400px o menos. He encontrado para Twitter Bootstrap que necesito aplicar el width: auto !important para que no tenga un ancho del 100% por defecto, sin embargo, mi tabla aún se encuentra fuera del contenedor principal. He intentado aplicar anchos de columna utilizando los atributos col-md-1 pero no parece hacer mucha diferencia
He encontrado que si aplica table-layout:fixed a una tabla se ajustará a un ancho definido.
Mi tabla está en un <div class="table-responsive"> así que, ¿debo configurar un estilo para mi tabla como width:90% para intentar que encaje en el contenedor principal?
Me pregunto si hay una solución conocida para resolver el problema de tener una mesa muy ancha con Bootstrap que se ajuste al ancho del contenedor principal.
Gracias
Creo que esto es lo que estás tratando de lograr?
¿Una mesa dentro de un panel-cuerpo que no se desborda debido al relleno del panel-cuerpo?
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="panel-body">
<table class="table table-hover table-striped table-bordered">
<thead>
<tr>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr><td>1</td><td>2</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
http://jsfiddle.net/52VtD/4215/
y su muestra completa:
Debe agregar esta clase al contenedor para que sea así:
<div class="table-responsive fixed-table-body">
O
<div class="table-responsive table-body">
Intente aplicar class="row" para los elementos <tr> .
Usa filas para crear grupos horizontales de columnas. El contenido se debe colocar dentro de las columnas, y solo las columnas pueden ser hijos inmediatos de las filas.
tenga en cuenta que las filas se deben colocar dentro de un .container (ancho fijo) o .container-fluid (ancho completo) para una alineación y relleno adecuados, por lo que es posible que desee aplicar class=container-fluid para la tabla o un elemento principal .
Solucioné el mismo problema cambiando <div class="container">...</div> a <div class="container-fluid">...</div>