Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

prevent bootstrap table being wider than span

Tags:

Below is a content which is usually generated dynamically. In the main part of the page there is a <div class="span6"> . Sometimes the Table in this div becomes wider than the div itself (I ve checked the css, the width is set to 100%) . If I only put short text into the table, or if i make the div wider everything is fine. The Questions are:

  1. Why can a table become wider than div class=spanX? I always thought, a block element takes the width of its parent?
  2. The number of characters/spaces in the respective td of the table can vary. How do I prevent the table from growing wider than the div? Of course I can dynamically check for the number of characters in a ts but what do i do with this information?

http://jsfiddle.net/vNnc6/

The HTML:

<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>MySite</title> <meta name="author" content="me"/>  <link href="static/css/bootstrap.css" rel="stylesheet"> <link href="static/css/bootstrap-responsive.css" rel="stylesheet"> <link href="static/profhase.css" rel="stylesheet">  <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="static/bootstrap/js/bootstrap.js"></script>   <body>   <div class="navbar navbar-inverse navbar-fixed-top">     <div class="navbar-inner">       <div class="container">     <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">         <span class="icon-bar"></span>         <span class="icon-bar"></span>         <span class="icon-bar"></span>     </a>      <ul class="nav">       <li><a class="brand" href="profhase">MyBrand</a></li>       <li><a href="#">Home</a></li>       <li><a href="#about">About</a></li>       <li><a href="#contact">Blog</a></li>     </ul>        <div class="nav pull-right collapse nav-collapse" style="hight: 0px">         <ul class="nav collapse nav-collapse">           <li><p class="navbar-text">Apps: </p></li>           <li><a href="firstapp/">AppOne <i class="icon-lock"></i></a></li>         </ul>       </div>       </div>     </div>   </div>    <div class="container-fluid">     <div class="row">       <div class="span2">     <p>       My Wonderful sidebar     </p>       </div>       <div class="span6" style="background:red;">     <table class="table">       <tbody>         <tr>           <th>Header1</th>           <th>Header2</th>           <th>Header3</th>           <th>Header4</th>           <th>Header5</th>           <th>Header6</th>         </tr>          <tr>           <td>My first Test</td>           <td>My second Test</td>           <td>My third Test</td>           <td>My fifth Test</td>           <td>My lalalalalong long lelong long long Test</td>            <td>         <div class="btn-group">           <a class="btn dropdown-toggle" data-toggle="dropdown">             Dropdown Choices <span class="caret"></span>           </a>            <ul class="dropdown-menu">             <li><a id=1>First wonderful choice</a></li>           </ul>          </div>           </td>         </tr>       </tbody>     </table>       </div>     </div>   </div>  </body> 
like image 491
ProfHase85 Avatar asked May 25 '13 18:05

ProfHase85


People also ask

How do I set the width of a bootstrap table?

Add . w-auto class to the table element to set an auto width to the table column. The width of the columns will automatically adjust to the content of the column. That means it will always take a minimum width required to present its content.

How do I make my bootstrap table font smaller?

Simply add a font-size: 8px; to your CSS selector. Replace 8 by any number you wish to change your font-size to. Show activity on this post. It's always best to add an explanation as to what your code does and why it solves the stated problem.


1 Answers

Thanks to the answer by FelipeAls this code did it:

table {     table-layout: fixed;     word-wrap: break-word; } 

Another possibility is not to use word wrap but having something like ...

http://jsfiddle.net/zzmfA/

like image 145
ProfHase85 Avatar answered Dec 01 '22 04:12

ProfHase85