Menu
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:
div class=spanX? I always thought, a block element takes the width of its parent?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> 
491
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.
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.
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/
145
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With