richardsgold
New Member
I'm using twitter bootstrap for a responsive design that contains a table with four columns. I want the table columns to have equal widths, so I have set \[code\]td width\[/code\] to 25%.I would think that the table rows would inherit their size from the table, and the table cells would then each be one quarter of that. This seems to work when the device width is 768px or greater. When the device width is smaller, the rows are sized based on the text in the largest cell, as opposed to the size of the parent table.I have included some sample code below, with background coloring on the different elements to highlight the error (made apparent by resizing the window horizontally). The errors are highlighted in yellow (where the underlying table colour is visible).Live example: http://pastehtml.com/view/cqrwl31z2.htmlI have tested in Chrome and Safari.\[code\]<!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>\[/code\]