html - Div 不是 100% 在框架内

Question

框架内有两个对象(Table 和 Div)。表格下方有一个灰色条。请指导我为什么灰色条宽度没有 100% 到达页面末尾。如果向右滚动框架，您会注意到灰色条是表格的一半。我怎样才能使它的宽度与表格完全相同？注意:我不能使用像素。 Table 和 Div 都应该是百分比。

fiddle :http://jsfiddle.net/awaises/78Zfa/

CSS:

.frame{
    overflow-x: scroll;
    width:100%;
    }
.gray-bar{
     background:#cdcdcd;
     padding:6px 0;
     width:100%;
     height: 20px;
     }

HTML:

 <div class="frame">
     <table border="1" width="100%">
         <tr>
             <td>Nam luctus</td>
             <td>Nam luctus sem sit amet</td>
             <td>Nam luctus sem sit amet fermentum tincidunt</td>
             <td>Nam luctus</td>
             <td>Nam luctus sem sit amet</td>
             <td>Nam luctus sem sit amet fermentum tincidunt</td>
             <td>Nam luctus</td>
             <td>Nam luctus sem sit amet</td>
             <td>Nam luctus sem sit amet fermentum tincidunt</td>
             <td>Nam luctus</td>
             <td>Nam luctus sem sit amet</td>
             <td>Nam luctus sem sit amet fermentum tincidunt</td>
             <td>Nam luctus</td>
             <td>Nam luctus sem sit amet</td>
             <td>Nam luctus sem sit amet fermentum tincidunt</td>
             <td>Nam luctus</td>
             <td>Nam luctus sem sit amet</td>
             <td>Nam luctus sem sit amet fermentum tincidunt</td>
             <td>Nam luctus</td>
             <td>Nam luctus sem sit amet</td>
             <td>Nam luctus sem sit amet fermentum tincidunt</td>
             <td>Nam luctus</td>
             <td>Nam luctus sem sit amet</td>
             <td>Nam luctus sem sit amet fermentum tincidunt</td>
         </tr>
</table>
 <div class="gray-bar">Edit | Delete</div>

Answer 1

width: 100% 只是将 div 拉伸(stretch)到视口(viewport)的 100%。如果您希望它是表格的宽度，请在底部添加第二行:

<tr>
    <td colspan="24" class="gray-bar">
        Edit | Delete
    </td>
</tr>

参见 jsFiddle