td宽度不适用于自动宽度表

时间:2013-10-05 18:23:45

标签: javascript html css

请看这个小提琴http://jsfiddle.net/LHsLM/1/

我正在尝试使用内联css将高度和宽度应用于自动宽度表,就像在小提琴中一样。但样式不适用。

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('');

1 个答案:

答案 0 :(得分:1)

width转换为您的td元素的min-width

抱歉,这不兼容IE-8。

此方法也适用于IE8:

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('');
}