Question

我正在使用表格来显示信息。当我调整大小（最小化窗口）时，表格列重叠。这是我的代码。

<table style="width:100%;table-layout:fixed">
            <tr style="border-bottom-style: none">
                <td>ID</td>
                <td>postalAddress</td>
                <td>emailAddress</td>
            </tr>
            <tr style="border-bottom-style: none">
                <td>123</td>
                <td>1234,west street</td>
                <td>sample1@gmail.com</td>
            </tr>
        </table>

此表信息显示良好。但当我最小化窗口时，电子邮件地址＆＃34;与邮政地址重叠。在css中是否有任何属性可以添加不重叠的列？

Answer 1

您的样式选择告诉您的表格允许重叠。首先，您选择表格的宽度始终是窗口的宽度。然后你选择列的宽度＆＃34; table-layout＆＃34;无论列的内容如何，总是等于窗口的宽度。因此，缩小窗口大小时发生的情况是，无论内容如何，每列都会收缩。缩小列后，通过其最长内容的点，该内容将开始重叠到下一列。

删除＆＃34;表格布局：固定＆＃34;从您的样式将防止重叠，但它将根据其内容的长度设置列大小。你也可以删除＆＃34;宽度：100％＆＃34;这也将解决问题，但要求你选择像素宽度。您可以使用javascript选项来检测窗口宽度和修改样式。像这样：

<table id="table" style="width:100%;table-layout:fixed">
   <tr style="border-bottom-style: none">
       <td>ID</td>
       <td>postalAddress</td>
       <td>emailAddress</td>
   </tr>
   <tr style="border-bottom-style: none">
       <td>123</td>
       <td>1234,west street</td>
       <td>sample1@gmail.com</td>
   </tr>
</table>

<script type="text/javascript" >    
window.onresize = function() {
    if (window.innerWidth > 300) {
        document.getElementById("table").style.width = "100%";  
    }
    else {
        document.getElementById("table").style.width = "300px";
    }
}
</script>

窗口大小更改时如何防止表列不重叠

1 个答案: