html - 表离开元素边界

Question

本质上，我的 table 有点飞出界

我希望能够通过在界内让它看起来更好。

这是针对 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");
function expand(){
    footer.className = "bottom2";
    expo.innerHTML = '<span class="searcharrow" onclick="javascript:collapse();">⇓</span>';
    footercont.innerHTML = '<div class="files"><div class="boxheader"></div><table><tr><th class="tablename">Name</th><th>Kind</th><th>Subject</th></tr> <tr class="separator"><td></td><td></td><td></td></tr> <tr><td><a href="http://google.com">img.JPG</a></td><td>JPEG image</td><td>Mathematics</td></tr><tr><td>img2.JPG</td><td>JPEG image</td><td>Science</td></tr></table></div>';
}
function collapse(){
    footer.className = "bottom1";
    expo.innerHTML = '<span class="searcharrow" onclick="javascript:expand();">⇑</span>';
    footercont.innerHTML = '';
}

相关图片:

Answer 1

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

在您的情况下，您的 .files 表 margin: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 */
}