Table leaving element bounds - html

Question

Essentially, my table is flying off the bounds a little bit
I want to be able to have it look better by being in bounds.
This is for firefox and doesn't need to follow any standards because it's for a personal project.
Relevant 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;
}
Relevant HTML:
<div id="footer" class="bottom1">
<span id="expo"><span class="searcharrow" onclick="javascript:expand();">⇑</span></span>
<div height="90%" id="footercont">
</div>
</div>
Relevant Javascript (includes table):
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>img.JPG</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 = '';
}
Relevant Image:

Answer 1

Margins add spaces outside of a div. Paddings add spaces inside of a div. Both contributes to making table size bigger than container, depending on your you wrote on css.
In your case, your .files table margin:2px added the length.
.files table {
/*margin:2px;*/ /*this caused the extra width*/
margin-right:6px;
padding:20px;
border-spacing:0;
border-collapse:collapse;
width:100%;
}
Looking at the css, I would suggest you remove some margins and paddings that are unnecessary.
Or instead of looking to make the sizes pixel perfect, you can use overflow hidden to hide eveything outside the container:
.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 */
}