How to make a table only one line high using html/css? - html

Question

I am trying to find a simple way to create a 1 row, 3 column table using css. I want the table width to be the width of the container div, and the height to be just 1 line. The first and third column should expand to contain the width of the text. The middle column should fill any remaining width (up to the container width), with overflow hidden.
I am having trouble with the middle column. When I use white-space:nowrap and overflow:hidden it extends the table beyond the width of the container div.
<div style="width:500px;">
<table style="width:100%;">
<tr>
<td style="white-space:nowrap;">
Title is Here
</td>
<td style="">
When this is too long to display on one line the overflow is hidden
</td>
<td style="white-space:nowrap;">
Last updated 12:05pm
</td>
</tr>
</table>
</div>
or is there maybe an easier way using div? but I can't seen to figure out how to make the center div only fill the space available instead of moving to the next line.
<div style="width:500px;">
<div style="float:left;">
Title is Here
</div>
<div style="float:left;">
When this is too long to display on one line the overflow is hidden
</div>
<div style="float:right;">
Last updated 12:05pm
</div>
</div>

Answer 1

you could do it with div based layout too
css
.table{width: 100%; }
.table, .table .item{ height: 20px; overflow: hidden;}
.table .item{float: left; box-sizing: border-box; -moz-box-sizing: border-box; background: #fcc; text-align: center;}
.table .item.right{float: right;}
.table .center{float: none; background: #ccf; }
markup
<div class="table">
<div class="item left">left content</div>
<div class="item right">right content</div>
<div class="center item">some center content</div>
</div>

Answer 2

your middle td doesn't have any width or height specified. Therefore, it has default width:auto and height:auto. That's why, it always scales itself up. If you try to give your td a fixed width, it will scale vertically.
You can stop this by giving it a fixed height and width along with display:inline-block;
same goes for divs also. but in case of divs, you don't need to specify display:inline-block;
you need to give your td (first sample ) or div(second sample) a fixed width and height, to hide the overflow i.e. to make overflow:hidden; work.
table based layout:
try this css in your middle td : see this fiddle
.middle
{
height:20px;
width:70%;
overflow:hidden;
display:inline-block; /*add this property also for the td */
}
div based layout
give your div this css: see this fiddle
.middle
{
float:left;
width:40%;
height:20px;
overflow:hidden;
}