Div内的表格-不是Div元素的100％宽度

Question

我在使div内的表始终始终是div内的100％时遇到麻烦，并且似乎内部表始终在div内具有不同的大小。 也许我已经在里面使用桌子弄糊涂了，但是我确实有很多格式可以尝试正确显示。 希望它在任何一个浏览器等中都一样

任何帮助表示赞赏。

下面的大多数代码。

此处溢出 -在表格内部使用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

似乎您没有应用width:100%; 到溢出的表。 尝试这样做（我相信溢出的表是.instable ）：

.instable {
    width:100%;
}

另外，请尝试在其他浏览器中查看它是否起作用。 我使用的是Chrome，但表格甚至没有填满整个div 。