How to create a dynamic width column in Twitter Bootstrap

Question

How do you use Twitter Bootstrap to create a table-like list structure, where some columns take as much space, as required to accommodate the widest element of that column, and a single column takes the remaining space?

For example:

Id    |Name     |Email address                
100001|Joe      |[email protected]
100   |Christine|[email protected]
1001  |John     |[email protected]

the Id column takes just enough space to accommodate the 100001 id, which is the longest id.

The Name column takes just enough space to accommodate the name Christine.

The Email column takes the remaining space.

Answer 1

Table like structure using the old table tag

Just kidding - or am i not.

<table class="table">
  <tr><th>Id</th>     <th>Name</th>      <th>Email address</th></tr>
  <tr><td>100001</td> <td>Joe</td>       <td>[email protected]</td></tr>
  <tr><td>100</td>    <td>Christine</td> <td>[email protected]</td></tr>
  <tr><td>1001</td>   <td>John</td>      <td>[email protected]</td></tr>
</table>

Using the grid system

In the documentation about the bootstrap grid system i could not find any auto-width building blocks. Everything out of the box has a certain width and a fixed number of columns:

   <div class="row">
      <div class="span2">ID</div>
      <div class="span2">Name</div>
      <div class="span8">E-Mail</div>
    </div>
    <div class="row">
      <div class="span2">100001</div>
      <div class="span2">Joe</div>
      <div class="span8">[email protected]</div>
    </div>
        <div class="row">
      <div class="span2">100</div>
      <div class="span2">Christine</div>
      <div class="span8">[email protected]</div>
    </div>

Therefore i assume that you have to build your own version for a 3-column-table with auto-size.

In my demo the grid-column wraps if the space is to narrow or, if the space is too wide, the columns are stretched.

Update with creative markup

I updated my demo with a custom class. The creative markup comes close to what you are looking for

  <div class="row">
      <div class="spanFl">100000001 <br />
        100
      </div>
      <div class="spanFl">Joe <br/>
          Christine
      </div>
      <div class="spanFl">[email protected] <br />
        [email protected]
      </div>
  </div>    

Using css-3 display table

On tutsplus i found an article using css-3 display:table to set up a table like layout. Unless you use three divs for each row it does not solve row wrapping issues.

#content {  
    display: table;  
}  
#mainContent {  
    display: table-cell;  
    width: 620px;  
    padding-right: 22px;  
}  
aside {  
    display: table-cell;  
    width: 300px;  
}  

Bootstrap responsive design

As far as i understood the bootstrap documentation there is no built-in soultion for a 3-column layout with auto and remaining width. To Quote the responsive design page on bootstrap: "Use media queries responsibly and only as a start to your mobile audiences. For larger projects, do consider dedicated code bases and not layers of media queries."

Could you elaborate more why you can not use a table?