Please look at this fiddle http://jsfiddle.net/LHsLM/1/ .
I am trying to apply height and width to a auto width table using inline css as in the fiddle. But the styles are not applied.
html:
<div id="a"></div>
css:
div {
height:300px;
width:500px;
overflow:auto;
}
js:
var str = ["<table>"];
for (var i = 0; i < 100; i++) {
var tr = "<tr>";
for(var j = 0; j < 100; j++){
tr += "<td style='width:120px;height:40px'>" + j + "</td>";
}
tr+="</tr>";
str.push(tr);
}
str.push("</table>");
document.getElementById('a').innerHTML = str.join('');
Convert width
to min-width
of your td elements.
Sorry, that is not IE-8 compatible.
This method works for IE8 too:
function tablo(){
var str = ["<table>"];
for (var i = 0; i < 100; i++) {
var tr = "<tr>";
for(var j = 0; j < 100; j++){
tr += "<td><div style='width:120px;height:40px'>" + j + "</div></td>";
}
tr+="</tr>";
str.push(tr);
}
str.push("</table>");
document.getElementById('a').innerHTML = str.join('');
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.