32

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      |MamiePVillalobos@teleworm.us
100   |Christine|ChristineJWilliams@dayrep.com
1001  |John     |JohnLMiley@dayrep.com

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.

Alex Kulinkovich
  • 4,408
  • 15
  • 46
  • 50
Elad
  • 19,079
  • 18
  • 62
  • 71
  • 3
    Tables where designed to display data like that. Why wouldn't you use one ? If you don't, do you really require the rows to be rows or just for appearance (e.g. make 3 column divs, floating left)? – Sherbrow Oct 21 '12 at 16:57
  • This is a very simplified example. What I am looking for is a layout mechanism like Bootstrap's scaffolding system, only that I need some columns to be in variable width according to the content. I considered the float left alternative you suggest, but that means not using Boostrap. – Elad Oct 22 '12 at 11:14
  • Elad as far as i understood the documentation there is no variable length. In this question http://stackoverflow.com/questions/9780333/ and in this fiddle http://jsfiddle.net/eterpstra/rdvaG/12/ are demos of a responsive design. But it wraps the column into the next line. As far as i understood your requirements you would like to say col1: width: auto, col2: width auto and col2: width remaining. See my update below – surfmuggle Oct 22 '12 at 16:53
  • 1
    If Bootstrap doesn't do it, why force it ? The grid is not meant to do that. If you really don't want to use the table, you can still cook something like [that jsfiddle](http://jsfiddle.net/Sherbrow/SDAZP/2/) - but the `` is what HTML has for your problem.
     – Sherbrow Oct 22 '12 at 20:16

4 Answers4

27

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>MamiePVillalobos@teleworm.us</td></tr>
  <tr><td>100</td>    <td>Christine</td> <td>ChristineJWilliams@dayrep.com</td></tr>
  <tr><td>1001</td>   <td>John</td>      <td>JohnLMiley@dayrep.com</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">MamiePVillalobos@teleworm.us</div>
    </div>
        <div class="row">
      <div class="span2">100</div>
      <div class="span2">Christine</div>
      <div class="span8">ChristineJWilliams@dayrep.com</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">MamiePVillalobos@teleworm.us <br />
        ChristineJWilliams@dayrep.com
      </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?

Ryan
  • 39
  • 1
  • 6
surfmuggle
  • 5,527
  • 7
  • 48
  • 77
  • 1
    Why wouldn't you use bootstrap `.span` as columns, and `.row-fluid` inside each column to make lines - instead of your creative markup option ? Would be lots of markup, but still proper. – Sherbrow Oct 22 '12 at 18:31
  • Did you mean like this? http://jsfiddle.net/m7wd5/4/ For shorter text it works fine (see version 3). For long text this leads to wrapping trouble – surfmuggle Oct 22 '12 at 19:04
  • documentation for bootstrap grid system is no longer available. – C_B Aug 14 '15 at 10:45
10

As others said, you should use regular tables where they make sense. Also, CSS3 display:table can be a good solution.

Depending on the use case, there is a different solution you could consider:
https://github.com/donquixote/bootstrap-autocolumns/blob/master/bootstrap-autocolumns.css
This is a piece of CSS that adds "col-sm-auto" in addition to "col-sm-1", "col-sm-5" etc.

(Atm, I would recommend to just copy this to a custom css file and adjust to your needs.)

Example

<div class="row">
  <div class="col-xs-auto">Left</div>
  <div class="col-xs-auto-right">Right</div>
  <div class="col-middle">Middle</div>
</div>

Here is a fiddle: http://jsfiddle.net/9wzqz/

Idea

  • .col-*-auto floats to the left, with the typical padding, but without any explicit width setting.
  • .col-*-auto-right floats to the right instead.
  • .col-middle has display:table, which prevents it from floating around the other elements.
  • Use "xs", "sm", "md", "lg" to target specific screen widths.

Limitations

The left/right columns will expand to full width, if you fill them with long text. Better use them for fixed-width stuff like images.

The middle column will only take the full available width if it has enough content in it.

donquixote
  • 4,877
  • 3
  • 31
  • 54
  • Also if on the second row you have a content of different width, your table cells won't be aligned to a single column of a fixed width. – Michael Radionov Dec 02 '15 at 13:37
  • I read that `overflow:hidden;` is another way to prevent content from wrapping under the floats, and I'd say this is the preferable way. – donquixote Jun 20 '17 at 00:13
4

if you don't need to limit the column size, you can just disable the width.

<span class="col-xs-1" style="width: inherit !important; ">unknown ...</span>

I need the bootstrap definition for the other column's properties (padding, height, etc.), so I added a col definition, but a small unit (col-xs-1).

notes:

  • the "!important" clause might be dropped (i'm not sure)
  • In my project the texts are known to be small anyway.
Berry Tsakala
  • 15,313
  • 12
  • 57
  • 80
-1

Well according To bootstrap Documentation you can apply table-responsive css class to the table element and make it responsive. What I observed was it actually makes scroll-able.

Community
  • 1
  • 1
Ehsan Samani
  • 130
  • 6