Loading grid with automatic column width
I am using bootstrap 3 and I am trying to compose a list of items where each row has 4 columns. I tried to use the bs3 grid, but that doesn't fit all my requirements (or at least I can't get this to work) as one of the columns has to use all the free space.
Example:
_____________________________________________________________________________ | | | Container | | Checkbox | Name (130px) | Message | Date | | Checkbox | Name (130px) | Message adasdsadsadsadsadsadasaaaaaaaaaaaaa | Date | | Checkbox | Name (130px) | Message adsadsadsadsadsadsadsaaaaaaaaaaaaaa ... | Date | | Checkbox | Name (130px) | Message | Date | | Checkbox | Name (130px) | Message | Date | | .... | | _____________________________________________________________________________ |
Basically, the date column should always be on the right, and the message column should use all the available width, and if the message is larger than the available space, it should be truncated (or overflow hidden)
thank
source to share
Note that the Bootstraps grid is mainly for layout, what you are here for is grid based content, aka table.
@import url('http://getbootstrap.com/dist/css/bootstrap.css');
html,
body {
width: 100%;
margin: 0;
}
table {
width: 100%;
table-layout: fixed;
}
td:first-of-type,
td:last-of-type {
width: 50px;
}
td:nth-of-type(2) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<table class="table table-striped">
<tr>
<td>fit</td>
<td>stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch
stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch</td>
<td>fit</td>
</tr>
<tr>
<td>fit</td>
<td>stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch
stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch</td>
<td>fit</td>
</tr>
<tr>
<td>fit</td>
<td>stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch
stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch</td>
<td>fit</td>
</tr>
<table>
source to share
You can wrap div
in one big column and then set display: table-cell
to those:
Something like the snippet below.
Fiddle : http://jsfiddle.net/abhitalks/qan2khse/
Excerpt
div.table {
border: 1px solid gray;
border-collapse: collapse;
display: table;
}
div.cell {
border: 1px solid gray;
display: table-cell;
}
div.cell:first-child, div.cell:nth-child(2) {
width: 10%;
}
div.cell:nth-child(3) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
div.cell:last-child {
width: 10%;
text-align: right;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<span>Caption</span>
</div>
</div>
<div class="row">
<div class="col-xs-12 table">
<div class="cell">one</div>
<div class="cell">two</div>
<div class="cell">three</div>
<div class="cell">four</div>
</div>
</div>
</div>
source to share