Menu
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 td width 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.html
I have 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>
785
asked Jan 30 '13 03:01
[class*="span"], .uneditable-input[class*="span"],
.row-fluid [class*="span"] {
display: table;
}
Maybe it's not a good idea to use grid classes on a table. Instead, use .span12 on a wrapper div and set the table to width: 100%.
102
Put a width on your table.
http://jsfiddle.net/nEeKQ/4/
table {
background-color: yellow;
width:100%;
}
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
