Home/ Questions/Q 9206713
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T00:14:01+00:00

I’m using twitter bootstrap for a responsive design that contains a table with four

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    [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%.

    • 0