javascript - 隐藏表溢出？

我在这里想要做的是在一个div中使用Javascript（成功）创建一个表，最大宽度为300px。

现在，如果我的表格的宽度大于300px，我希望隐藏溢出，但是即使我将<td>设置为其他宽度，表格也会每次将其宽度缩小到300px：

<style>
#tablespace {
margin:auto;
position:relative;
width:300px;
overflow:hidden;
}
</style>

<button onclick="CreateTable()" >Try it</button>
<div id="tablespace">
   <p id="tablespace"> </p>
</div>

<script>
function CreateTable()
{
    var tablecontents = "";
    tablecontents = "<table border=1>";
//number of rows
for (var i = 0; i < 3; i ++)
{
tablecontents += "<tr>";
//number of columns
    for (var a = 0; a < 5; a ++)
    {
      tablecontents += "<td height= 50, width= 100>" + i + "</td>";
    }
    tablecontents += "</tr>";
}
tablecontents += "</table>";
document.getElementById("tablespace").innerHTML = tablecontents;
}
</script>

因此，在我使用单元格的高度为50px，宽度为100px的情况（因为div的最大宽度为300px）的情况下，我应该只能看到2个半单元格，然后将其余单元格隐藏起来，但事实并非如此。

我了解这可能是一个基本错误，但我不知道。

最佳答案

尝试更改此设置（我不知道代码中是否已经实际存在）：

tablecontents += "<td height= 50, width= 100>" + i + "</td>";

至

tablecontents += '<td height="50px", width="100px">' + i + "</td>";

顺便说一句，我建议跳过所有这些HTML3参数，并通过单独的CSS类来完成所有操作，例如

tablecontents += '<td class='croppedTable'>' + i + "</td>";

和

<style>
#tablespace {
margin:auto;
position:relative;
width:300px;
overflow:hidden;
}

.croppedTable {
... some styles ...
}
.croppedTable TD {
... some additional styles ...
width: 100px;
height: 50px;

}
</style>

关于javascript - 隐藏表溢出？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16531604/