I found many answers to this question on Google, but none of them seem to work for all browsers.
I am looking for a CSS-only way to get min-width working on Firefox, IE6, IE7, and IE8. It is well-known that IE does not support min-width, so several hacks are out there to try to emulate the behavior of min-width. Unfortunately, I have not had any luck with them.
Specifically, this is what I'm trying to do:
<style type="text/css">
table.dataTable td {
white-space: nowrap;
}
table.dataTable td.largeCell {
white-space: normal;
min-width: 300px;
}
</style>
<table class="dataTable">
<tr>
<td>ID</td>
<td>Date</td>
<td>Title</td>
<td class="largeCell">A large amount of data like a description that could
span several lines within this cell.</td>
<td>Link</td>
</tr>
</table>
Does anyone have a way to get this to work?
The min-width CSS property sets the minimum width of an element. It prevents the used value of the width property from becoming smaller than the value specified for min-width .
According to the W3C specifications, the min-content is the smallest size a box can take without overflowing its content. For horizontal content, the min-content uses the length of the widest bit of content in the element box and automatically sets that length value as the box width.
So it turns out that the necessary hack for getting min-width to work in all browsers isn't as ugly as many make it out to be.
All I had to do was add CSS for a div within the largeCell
and add an empty div at the end of the cell. The div is only 1px tall, so it doesn't really make the cell look larger than it should be.
<style type="text/css">
table.dataTable td {
white-space: nowrap;
}
table.dataTable td.largeCell {
white-space: normal;
min-width: 300px;
}
table.dataTable td.largeCell div {
margin: 0px 0px 0px 0px;
height: 1px;
width: 300px;
}
</style>
<table class="dataTable">
<tr>
<td>ID</td>
<td>Date</td>
<td>Title</td>
<td class="largeCell">A large amount of data like a description that could
span several lines within this cell.
<div></div>
</td>
<td>Link</td>
</tr>
</table>
I use:
min-width: 200px;
_width: 200px; /* IE6 */
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With