Javascript 隐藏的表溢出？

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

现在，如果我的表的宽度大于300px，我希望溢出被隐藏，但是发生的事情是，即使我将

设置为不同的宽度，表的宽度每次都会缩小到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>

<pre>With min-width on table cells</pre>
<div>
    <table id="table1">
        <tr>
            <td>Col1</td>
            <td>Col2</td>
            <td>Col3</td>
            <td>Col4</td>
        </tr>
        <tr>
            <td>Col1</td>
            <td>Col2</td>
            <td>Col3</td>
            <td>Col4</td>
        </tr>
        <tr>
            <td>Col1</td>
            <td>Col2</td>
            <td>Col3</td>
            <td>Col4</td>
        </tr>
    </table>
</div>
<hr><br>
<pre>Without min-width on table cells</pre>
<div>
    <table id="table2">
        <tr>
            <td>Col1</td>
            <td>Col2</td>
            <td>Col3</td>
            <td>Col4</td>
        </tr>
        <tr>
            <td>Col1</td>
            <td>Col2</td>
            <td>Col3</td>
            <td>Col4</td>
        </tr>
        <tr>
            <td>Col1</td>
            <td>Col2</td>
            <td>Col3</td>
            <td>Col4</td>
        </tr>
    </table>
</div>

#表空间{
保证金：自动；
位置：相对位置；
宽度：300px；
溢出：隐藏；
}
试试看

函数CreateTable（）
{
var tablecontents=“”；
tablecontents=“”；
//行数
对于（变量i=0；i<3；i++）
{ 
tablecontents+=“”；
//列数
对于（var a=0；a<5；a++）
{
tablecontents+=“+i+”；
}
tablecontents+=“”；
}
tablecontents+=“”；
document.getElementById（“表空间”）.innerHTML=tablecontents；
}

所以我使用了一个单元格的高度为50px，宽度为100px，因为我的div的最大宽度是300px，我应该只看到2个半单元格，其余的都隐藏了，但事实并非如此

---

我知道这可能是一个基本的错误，但我没有任何线索。

在表格单元格上使用

min width

演示：

快速示例：

CSS:

HTML:

表格单元格上的最小宽度
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐


表单元格上没有最小宽度
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐

尝试更改此选项（我不知道此选项是否已在代码中）：

tablecontents+=“i+”；

到

tablecontents+=''+i+''；

顺便说一句，我建议跳过所有的HTML3参数，并通过像

tablecontents+=''+i+''；

及

#表空间{
保证金：自动；
位置：相对位置；
宽度：300px；
溢出：隐藏；
}
.可裁剪{
…一些款式。。。
}
.可裁剪TD{
…一些附加样式。。。
宽度：100px；
高度：50px；
}

<pre>With min-width on table cells</pre>
<div>
    <table id="table1">
        <tr>
            <td>Col1</td>
            <td>Col2</td>
            <td>Col3</td>
            <td>Col4</td>
        </tr>
        <tr>
            <td>Col1</td>
            <td>Col2</td>
            <td>Col3</td>
            <td>Col4</td>
        </tr>
        <tr>
            <td>Col1</td>
            <td>Col2</td>
            <td>Col3</td>
            <td>Col4</td>
        </tr>
    </table>
</div>
<hr><br>
<pre>Without min-width on table cells</pre>
<div>
    <table id="table2">
        <tr>
            <td>Col1</td>
            <td>Col2</td>
            <td>Col3</td>
            <td>Col4</td>
        </tr>
        <tr>
            <td>Col1</td>
            <td>Col2</td>
            <td>Col3</td>
            <td>Col4</td>
        </tr>
        <tr>
            <td>Col1</td>
            <td>Col2</td>
            <td>Col3</td>
            <td>Col4</td>
        </tr>
    </table>
</div>

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

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

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>