CSS min-width in IE6, 7, and 8
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?
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 */
min-height:expression( document.body.clientHeight +'px');
min-width:expression( document.body.clientWidth +'px');
By default the Document mode in IE will be Quirks mode
Solution: add the doctype on top of your html page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
After so many hack that i have tried none of them works for me for this "min-width" issue, but finally i got its solution for IE 8.
Try to use this: <!DOCTYPE html> as your DOC type, this is HTML 5 DOC Type that turns your IE8 page to behave like mozilla or webkit browser.
So apart for min-width and min-height issue, it solves many IE8 problems very easily.
If my post helps you please mail me with your name thats it works for you.
Try adding:
overflow: visible
to the element
I was having a similar issue, I needed a site to be 95% unless it was less than 980px.
Nothing here worked, and in desperation I reached out to Bill Burlington's expression answer. The one mentioned above didn't work for me, but if I used a more robust expression it did!
width: expression ( document.body.clientWidth < 980 ? "980px" : "95%" );
This basically says if the width is less than 980px, set the width to 980px. If it's wider, set the width to 95%.
<style type="text/css">
.table1 th a {
display:inline-block;
width:200px";
}
</style>
<table>
<tr>
<th><a>title1</a></th>
<th><a>title2</a></th>
</tr>
<tr>
<td>text</td>
<td>text</td>
</tr>
</table>
加载中,请稍侯......
精彩评论