Question

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

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

实际上，它是div级别框架的100％宽度。

div.frame是视口宽度的100％，忽略了从视口中生长的表格宽度。

一个基本的解决方案是让你的div.frame显示不像一个块，而是像表格单元格或内联块。但溢出-x将不再适用

See jsFiddle

.frame{
    overflow-x: scroll;
    border:1px solid red;
    display:table-cell;
}

因此，为了保持水平滚动条，重新设计你的html，以一种方式将div.frame封装在具有overflow-x：scroll的outter div中。

你也可以尝试应用'clearfix'修复，但我不是100％肯定。如果您想尝试一下，请参阅What is a clearfix?和http://code-tricks.com/css-clearfix-methods/以获取基本参考。

否则，只需在表格的底部添加一行以包含“编辑|删除”功能（我听说有人对数据表seo进行了研究？）。

Answer 2

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

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

请参阅jsFiddle

Answer 3

灰条短的原因是因为框架没有随桌子一起扩展。灰色条随框架一起扩展。

我找到了问题here的答案。

删除宽度值并将display: inline-block;添加到.frame。

试试这个：

.frame{
    overflow-x: scroll;
    display: inline-block;
}

.gray-bar{
    background:#cdcdcd;
    padding:6px 0;
    height: 20px;
}

Answer 4

内部元素只需要一个父元素具有灵活大小的父级可以解决此问题。（display:inline-block;）
http://jsfiddle.net/78Zfa/12/

Answer 5

那么你的div跨度100％它只适合屏幕大小，另一种选择是使用javascript来改变大小...

我不知道你是否愿意这样做

document.getElementsByClassName("gray-bar")[0].style.width=
document.getElementsByClassName("frame")[0].
getElementsByTagName("table")[0].clientWidth;

Div不在框架内100％

5 个答案: