Html 表离开元素边界

基本上，我的桌子有点飞离了边界

我想通过限制让它看起来更好

这是针对firefox的，不需要遵循任何标准，因为它是针对个人项目的

相关CSS：

.files{
    box-shadow:0px 25px 45px 10px rgba(0,0,0,0.5);
    border-radius:4px;
    font-family:"Lucida Grande",LucidaGrande;
    font-size:8pt;
    margin:0 auto;
    border:1px solid #888888;
    width:50%;
    height:50%;
    color:#000000;
    background:#FFFFFF;
    text-align:left;
}
.files a:link,.files a:hover,.files a:focus.files a:visited,.files a:active{
    text-decoration:none;
    color:#000000;
}
.files table{
    margin:2px;
    margin-right:6px;
    padding:3px;
    border-spacing:0;
    border-collapse:collapse;
    width:100%;
}
.files table th{
    padding:3px;
    border-bottom:1px solid #888888;
    background:#FFFFFF;
    color:#555566;
    font-weight:1000;
}
.files table tr td{
    padding-left:20px;
}
.files table tr:nth-child(even){
    background:#FFFFFF;
}
.files table tr:nth-child(odd){
    background:#DDEEFF;
}
.separator{
    min-height:1px;
    background:#FFFFFF;
}
.tablename{
    width:60%;
}
.boxheader{
    height:20px;
    width:100%;
    background:#555555;
}

相关HTML：

<div id="footer" class="bottom1">
    <span id="expo"><span class="searcharrow" onclick="javascript:expand();">⇑</span></span>
    <div height="90%" id="footercont">

    </div>
</div>

⇑

相关Javascript（包括表格）：

var expo=document.getElementById（“expo”）；
var footercont=document.getElementById（“footercont”）；
函数展开（）{
footer.className=“bottom2”；
expo.innerHTML⇓';
footercont.innerHTML='NameKindSubject JPEG imageMathematicsimg2.JPGJPEG imageScience'；
}
函数折叠（）{
footer.className=“bottom1”；
expo.innerHTML⇑';
footercont.innerHTML=''；
}

相关图片：

---

边距在div外部添加空格。填充在div内部添加空格。两者都有助于使表的大小大于容器，具体取决于您在css上编写的内容

在您的情况下，您的.files表边距：2px增加了长度

.files table {
    /*margin:2px;*/ /*this caused the extra width*/
    margin-right:6px;
    padding:20px;
    border-spacing:0;
    border-collapse:collapse;
    width:100%;
}

看看css，我建议您删除一些不必要的边距和填充

或者，您可以使用overflow hidden来隐藏容器外部的所有内容，而不是让大小变得完美：

.files{
    box-shadow:0px 25px 45px 10px rgba(0,0,0,0.5);
    border-radius:4px;
    font-family:"Lucida Grande",LucidaGrande;
    font-size:8pt;
    margin:0 auto;
    border:1px solid #888888;
    width:50%;
    height:50%;
    color:#000000;
    background:#FFFFFF;
    text-align:left;
    overflow:hidden; /*added this line of code */
}

---

您发布的html没有任何

表

。您发布的html中缺少

css

中的类。请在

html

中发布更多反映您问题的部分。您看过JS了吗？表在js中。我发布了相关的CSS，箭头的CSS是不相关的。谢谢你的信息，它起作用了，表格现在看起来很好！我想我不小心把额外的边距放进去了，因为我不知道填充/边距是这样工作的。我知道边距和填充物确实会把东西推开，但我不知道尺寸会增加：）

.files{
    box-shadow:0px 25px 45px 10px rgba(0,0,0,0.5);
    border-radius:4px;
    font-family:"Lucida Grande",LucidaGrande;
    font-size:8pt;
    margin:0 auto;
    border:1px solid #888888;
    width:50%;
    height:50%;
    color:#000000;
    background:#FFFFFF;
    text-align:left;
    overflow:hidden; /*added this line of code */
}