表留下元素界定

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內添加空格。兩者都有助於使表格大小大於容器，具體取決於您在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，我建議你刪除一些不必要的邊距和填充。

，而不是尋找使大小像素完美或者，您也可以使用溢出隱躲容器外eveything：

.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 */ 
}