테이블 안쪽 Div - Div 요소의 100 % 너비가 아님

Question

div 안에있는 테이블을 항상 div 내부에 100 % 가져 오는 데 문제가 있습니다. 내부 테이블의 크기가 항상 내부와 다른 것으로 나타납니다 div. 아마도 나는 내부에서 테이블을 사용하여 물을 혼란스럽게 만들었지 만, 제대로 표시되도록 포맷팅을하고 있습니다. 브라우저 등에서도 동일한 작업을 수행 할 수 있습니다.

도움을 주시면 감사하겠습니다.

아래의 대부분 코드.

Overflow Here

- 당신이 넘치는 테이블에 width:100%;을 적용하는 것처럼 테이블

<script language="javascript"> 
function one_edit() { 
var ele = document.getElementById("one_edit"); 
var text = document.getElementById("one_displayedit"); 
if(ele.style.display == "block") { 
     ele.style.display = "none"; 
    text.innerHTML = "<b>ONE</b>"; 
} 
else { 
    ele.style.display = "block"; 
    text.innerHTML = "<b>ONE</b>"; 
} 
} 
</script> 
<script language="javascript"> 
function two_edit() { 
var ele = document.getElementById("two_edit"); 
var text = document.getElementById("two_displayedit"); 
if(ele.style.display == "block") { 
     ele.style.display = "none"; 
    text.innerHTML = "<b>TWO</b>"; 
} 
else { 
    ele.style.display = "block"; 
    text.innerHTML = "<b>TWO</b>"; 
} 
} 
</script> 


<style type="text/css"> 

.flist { 
font-family: Verdana; font-size: 13pt; font-weight: bold; 
overflow: hidden; 
position: relative; 
background-color: #e9e9e9; 
padding: 5px; 
margin-top: 5px; 
margin-left: 21%; 
margin-right: 21%; 
border: 1px solid #000; 
} 

.flist > table 
{ 
    width: 100%; 
} 

.fqlist { 
font-family: Verdana; font-size: 12pt; font-weight: normal; 
position: relative; 
background-color: #f8f8f8; 
padding: 5px; 
margin-bottom: 5px; 
margin-left: 21%; 
margin-right: 21%; 
border-left: 1px solid #000; 
border-right: 1px solid #000; 
border-bottom: 1px solid #000; 
} 

.code10 { font-family: Verdana; font-size: 10pt; font-weight: normal; color: #cc0033;} 

.instable { 
margin-bottom: 8px; 
border: 1px solid #474747; 
background-color: #eeeeee; 
} 

</style> 


<div class=flist> 
<table cellpadding=2 border=0 style="table-layout:fixed"> 
<tr> 
    <td valign=middle> 
    <a id="one_displayedit" href="javascript:one_edit();"><b>ONE</b></a> 
    </td> 
    <td align=right><input type="button" name="CheckAll" value="All N/A" class=verd8 onClick="checkAll(one_)"></td> 
</tr> 
</table>  
</div> 

<div id="one_edit" style="display: none" class=fqlist> 

    <table cellpadding=3 cellspacing=3 align=center class=instable> 
    <tr> 
    <td align=center><input type="button" name="CheckAll" value="All Yes" class=verd8 onClick="checkAll(one_yes)"></td> 
    <td align=center><input type="button" name="CheckAll" value="All No" class=verd8 onClick="checkAll(one_no)"></td> 
    <td align=center><input type="button" name="CheckAll" value="All N/A" class=verd8 onClick="checkAll(one_)"></td> 
    </tr> 
    </table> 

    <table cellpadding=3 cellspacing=3 align=center class=instable> 
    <tr> 
    <td valign=top colspan=3 align=center> 
    This is a General Question for whatever. 
    </td> 
    </tr> 

    <tr> 
    <td colspan=3 align=center> 
    Some General Notes 
    </td> 
    </tr> 

    <tr> 

    <td align=center class=verd11><b>Yes</b></td> 
    <td align=center class=verd11><b>No</b></td> 
    <td align=center class=verd11><b>N/A</b></td> 
    </tr> 

    <tr> 
    <td valign=top colspan=3 align=center> 
    <span class=code10>General Notes About Question Rules.</span> 
    </td> 
    </tr> 

    <tr> 
    <td colspan=3 align=center class=cnote width=100%> 
    <b>Compliance Note: 
    <br> 
    <textarea style="width:85%" rows="3" name="compliancenote_#qid#"></textarea> 
    <br> 
    </td> 
    </tr> 
    </table> 

</div> 

<div class=flist> 
<table cellpadding=2 border=0 style="table-layout:fixed"> 
<tr> 
    <td valign=middle> 
    <a id="two_displayedit" href="javascript:two_edit();"><b>Two</b></a> 
    </td> 
    <td align=right><input type="button" name="CheckAll" value="All N/A" class=verd8 onClick="checkAll(two_)"></td> 
</tr> 
</table>  
</div> 

<div id="two_edit" style="display: none" class=fqlist> 

    <table cellpadding=3 cellspacing=3 align=center class=instable> 
    <tr> 
    <td align=center><input type="button" name="CheckAll" value="All Yes" class=verd8 onClick="checkAll(two_yes)"></td> 
    <td align=center><input type="button" name="CheckAll" value="All No" class=verd8 onClick="checkAll(two_no)"></td> 
    <td align=center><input type="button" name="CheckAll" value="All N/A" class=verd8 onClick="checkAll(two_)"></td> 
    </tr> 
    </table> 

    <table cellpadding=3 cellspacing=3 align=center class=instable> 
    <tr> 
    <td valign=top colspan=3 align=center> 
    This is a General Question for whatever and is bigger than the other question, and I am trying to keep going to make it bigger and longer. 
    So not sure how to get these showing as same width across entire div length. 
    </td> 
    </tr> 

    <tr> 
    <td colspan=3 align=center> 
    Some General Notes 
    </td> 
    </tr> 

    <tr> 

    <td align=center class=verd11><b>Yes</b></td> 
    <td align=center class=verd11><b>No</b></td> 
    <td align=center class=verd11><b>N/A</b></td> 
    </tr> 

    <tr> 
    <td valign=top colspan=3 align=center> 
    <span class=code10>General Notes About Question Rules.</span> 
    </td> 
    </tr> 

    <tr> 
    <td colspan=3 align=center class=cnote width=100%> 
    <b>Compliance Note: 
    <br> 
    <textarea style="width:85%" rows="3" name="compliancenote_#qid#"></textarea> 
    <br> 
    </td> 
    </tr> 
    </table> 

</div> 

Answer 1

내부 폭을 사용 = 100 %는 보이지 않는다.

이

.instable { 
    width:100%; 
} 

또한 작동 여부를 확인하기 위해 다른 브라우저에서 그것을 보는 시도 : (I가 넘치는 테이블 .instable이라고 생각) 그 일을보십시오. Chrome을 사용하고 있는데 테이블 전체가 div으로 채워지지 않습니다.