表隐藏的溢出？-Java 学习之路

我在这里要做的是在一个带有 max width of 300px 的div中创建一个带有Javascript（成功）的表 .

现在，如果我的表格宽度超过300px，我想要 overflow to be hidden ，但是即使我将 <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个半单元格，然后其余部分被隐藏，但事实并非如此 .

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

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>

回复于 2024-04-26T13:34:35+08:00

在表格单元格上使用 min-width .

Demo: http://jsfiddle.net/jUqvj/

快速示例：

CSS：

div {
    max-width: 300px;
    border: 1px solid #f00;
    overflow: hidden;
}
#table1 td {
    min-width: 100px;
    border: 1px solid #0ff;
}
#table2 td {
    width: 100px; /* here it's not effective as desired */
    border: 1px solid #0ff;
}

HTML：

<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>

回复于 2024-04-26T13:34:35+08:00

表隐藏的溢出？

2 回答

相关问题