表离开元素边界

Question

基本上，我的桌子稍微偏离界限

我希望能够让它看起来更好看。

这适用于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表格边距：2px增加了长度。

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

查看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 */
}