Geek Answers Handbook

The body of the table does not occupy the full width of the table

I use twitter bootstrap for a responsive design that contains a four-column table. I want the columns of the table to have equal width, so I set td width to 25%.

I would think that the rows of the table inherit their size from the table, and the cells of the table will be one quarter. This seems to work when the width of the device is 768 pixels or more. When the width of the device is smaller, the rows are sized based on the text in the largest cell, unlike the size of the parent table.

I included some code example below, with the background color on different elements, to highlight the error (as can be seen from the horizontal resizing of the window). Errors are highlighted in yellow (where the main color of the table is displayed).

Real-time example: http://pastehtml.com/view/cqrwl31z2.html

I tested in Chrome and Safari.

 <!DOCTYPE html> <html> <head> <title>Table Test</title> <!-- Bootstrap --> <link href="http://www.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet" media="screen"> <script type="text/javascript" src="http://www.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> td, th { width: 25% !important; } table { background-color: yellow; } tr { background-color: gray; } th { background-color: aqua; } td:nth-child(1) { background-color: red; } td:nth-child(2) { background-color: green; } td:nth-child(3) { background-color: blue; } td:nth-child(4) { background-color: purple; } </style> </head> <body> <div class="container"> <h1>Hello, world!</h1> <div class="row"> <table class="span12"> <thead> <tr> <th>A</th> <th>B</th> <th>C</th> <th>D</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <tr> </tbody> </table> </div> <div class="row"> <table class="span12"> <thead> <tr> <th>Longer Table</th> <th>Headers In</th> <th>This</th> <th>Table</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <tr> </tbody> </table> </div> </div> </body> </html>
+6
source share
4 answers
 [class*="span"], .uneditable-input[class*="span"], .row-fluid [class*="span"] { display: table; }

It may not be recommended to use grid classes in a table. Instead, use .span12 in the shell div and set the table to width: 100% .

+5
source

Put the width in the table.

http://jsfiddle.net/nEeKQ/4/

 table { background-color: yellow; width:100%; }
+3
source

Make sure that the width of the parent containers is 100% , in addition to the table that has either the attribute width="100%" or style="width:100%" .

+1
source

When you zoom in or the width of the device becomes larger than the specified width, it does not have room for expansion, since the width is specified as%, not as px, so the best way to overcome this is to use

min-width:100px

for td or th, which will be the minimum width, it will take even when the width of the device exceeds.

0
source

More articles:


All Articles