Thank you for the feedback! Removing the table { height: 100%; } did not work because it doesn't stretch the table to the bottom of the page. This stretching is what I wanted, but I think this is also what caused the overly inflated <tr> which this question refers to.
The solution to this was more of an accident:
<tr style="height: 0;">
...
</tr>
With this, the row shrinks to the size of its content, while the table still stretches to the bottom of the page. Not sure if this is a "healthy" solution, but is sure works.
Answer from Jens on Stack OverflowThank you for the feedback! Removing the table { height: 100%; } did not work because it doesn't stretch the table to the bottom of the page. This stretching is what I wanted, but I think this is also what caused the overly inflated <tr> which this question refers to.
The solution to this was more of an accident:
<tr style="height: 0;">
...
</tr>
With this, the row shrinks to the size of its content, while the table still stretches to the bottom of the page. Not sure if this is a "healthy" solution, but is sure works.
remove height
html, body, table {
width: 100%;
}
and it looks like this (no more overhead in <tr> height)
Why 100% height on html and body anyway? Also, I would change There's a <ul> here to There's a <ul> here
If you give your TD a height of 1px, then the child div would have a heighted parent to calculate it's % from. Because your contents would be larger then 1px, the td would automatically grow, as would the div. Kinda a garbage hack, but I bet it would work.
CSS height: 100% only works if the element's parent has an explicitly defined height. For example, this would work as expected:
td {
height: 200px;
}
td div {
/* div will now take up full 200px of parent's height */
height: 100%;
}
Since it seems like your <td> is going to be variable height, what if you added the bottom right icon with an absolutely positioned image like so:
.thatSetsABackgroundWithAnIcon {
/* Makes the <div> a coordinate map for the icon */
position: relative;
/* Takes the full height of its parent <td>. For this to work, the <td>
must have an explicit height set. */
height: 100%;
}
.thatSetsABackgroundWithAnIcon .theIcon {
position: absolute;
bottom: 0;
right: 0;
}
With the table cell markup like so:
<td class="thatSetsABackground">
<div class="thatSetsABackgroundWithAnIcon">
<dl>
<dt>yada
</dt>
<dd>yada
</dd>
</dl>
<img class="theIcon" src="foo-icon.png" alt="foo!"/>
</div>
</td>
Edit: using jQuery to set div's height
If you keep the <div> as a child of the <td>, this snippet of jQuery will properly set its height:
// Loop through all the div.thatSetsABackgroundWithAnIcon on your page
$('div.thatSetsABackgroundWithAnIcon').each(function(){
var 
(this);
// Set the div's height to its parent td's height
$div.height($div.closest('td').height());
});
I'm not sure if I understand your question, but I'll take a stab at it:
td {
border: 1px solid #000;
}
tr td:last-child {
width: 1%;
white-space: nowrap;
}<table style="width: 100%;">
<tr>
<td class="block">this should stretch</td>
<td class="block">this should stretch</td>
<td class="block">this should be the content width</td>
</tr>
</table>Setting
max-width:100%;
white-space:nowrap;
will solve your problem.
The best solution is to put a div inside the cell with the height:
<td style="padding-left:5px;">
<div style="height: 50px; overflow:hidden;">
...
</div>
</td>
BTW, what is the span for? If you only need it for styling, you can style the cell directly instead.
The CSS property you are looking for is line-height. You simply have to put it in the <td>, not in the contained <span>
<td style="padding-left:5px; line-height: 50px; overflow: hidden">
</td>
Define width of .absorbing-column
Set table-layout to auto and define an extreme width on .absorbing-column.
Here I have set the width to 100% because it ensures that this column will take the maximum amount of space allowed, while the columns with no defined width will reduce to fit their content and no further.
This is one of the quirky benefits of how tables behave. The table-layout: auto algorithm is mathematically forgiving.
You may even choose to define a min-width on all td elements to prevent them from becoming too narrow and the table will behave nicely.
table {
table-layout: auto;
border-collapse: collapse;
width: 100%;
}
table td {
border: 1px solid #ccc;
}
table .absorbing-column {
width: 100%;
}<table>
<thead>
<tr>
<th>Column A</th>
<th>Column B</th>
<th>Column C</th>
<th class="absorbing-column">Column D</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data A.1 lorem</td>
<td>Data B.1 ip</td>
<td>Data C.1 sum l</td>
<td>Data D.1</td>
</tr>
<tr>
<td>Data A.2 ipsum</td>
<td>Data B.2 lorem</td>
<td>Data C.2 some data</td>
<td>Data D.2 a long line of text that is long</td>
</tr>
<tr>
<td>Data A.3</td>
<td>Data B.3</td>
<td>Data C.3</td>
<td>Data D.3</td>
</tr>
</tbody>
</table>demo - http://jsfiddle.net/victor_007/ywevz8ra/
added border for better view (testing)
more info about white-space
table{
width:100%;
}
table td{
white-space: nowrap; /** added **/
}
table td:last-child{
width:100%;
}
table {
width: 100%;
}
table td {
white-space: nowrap;
}
table td:last-child {
width: 100%;
}<table border="1">
<thead>
<tr>
<th>Column A</th>
<th>Column B</th>
<th>Column C</th>
<th class="absorbing-column">Column D</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data A.1 lorem</td>
<td>Data B.1 ip</td>
<td>Data C.1 sum l</td>
<td>Data D.1</td>
</tr>
<tr>
<td>Data A.2 ipsum</td>
<td>Data B.2 lorem</td>
<td>Data C.2 some data</td>
<td>Data D.2 a long line of text that is long</td>
</tr>
<tr>
<td>Data A.3</td>
<td>Data B.3</td>
<td>Data C.3</td>
<td>Data D.3</td>
</tr>
</tbody>
</table>I had to set a fake height to the <tr> and height: inherit for <td>s
tr has height: 1px (it's ignored anyway)
Then set the td height: inherit
Then set the div to height: 100%
This worked for me in IE edge and Chrome:
<table style="width:200px;">
<tr style="height: 1px;">
<td style="height: inherit; border: 1px solid #000; width: 100px;">
<div>
Something big with multi lines and makes table bigger
</div>
</td>
<td style="height: inherit; border: 1px solid #000; width: 100px;">
<div style="background-color: red; height: 100%;">
full-height div
</div>
</td>
</tr>
</table>div height=100% in table cell will work only when table has height attribute itself.
<table border="1" style="height:300px; width: 100px;">
<tr><td>cell1</td><td>cell2</td></tr>
<tr>
<td style="height: 100%">
<div style="height: 100%; width: 100%; background-color:pink;"></div>
</td>
<td>long text long text long text long text long text long text</td>
</tr>
</table>UPD in FireFox you should also set height=100% value to the parent TD element