栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

CSS:将具有长单元格内容的表限制为页面宽度吗?

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

CSS:将具有长单元格内容的表限制为页面宽度吗?

为此,您必须将长文本包装成两个div。外层人

position: relative
只得到内层人。内部的获取
position:absolute
overflow: hidden
width: 100%
(这将其限制为表单元格的大小)。

现在,表格布局算法将这些表格单元视为空(因为绝对位置的元素从布局计算中排除了)。因此,我们必须告诉它无论如何都要扩大该列。有趣的是,设置

width:100%
相关
<col>
元素的工作原理是,它实际上不会填充宽度的100%,而是100%减去所有其他列(自动调整大小)的宽度。它还需要一个
vertical-align: top
,否则(空)外部div会居中对齐,因此绝对定位的元素将偏离半行。

这是一个完整的示例,其中有一个三列,两行的表,显示了此工作方式:

CSS:

div.outer {    position: relative;}div.inner {    overflow: hidden;    white-space: nowrap;    position: absolute;    width: 100%;}table {    width: 100%;    border-collapse: collapse;}td {    border: 1px dotted black;    vertical-align: top;}col.fill-the-rest { width: 100%; }

HTML:

<table>    <col><col><col >    <tr>        <td>foo</td>        <td>fooofooooofooooo</td>        <td> <div >     <div >         Long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text     </div> </div>        </td>    </tr>    <tr>        <td>barbarbarbarbar</td>        <td>bar</td>        <td> <div >     <div >         Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text     </div> </div>        </td>    </tr></table>

在此示例中,前两列将具有最小可能的大小(即,空格会使它们包装很多,除非您也添加

white-space: nowrap
它们)。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/633430.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号