伏龙阁资源网

Table自适应以及溢出的一些设置详解
站长资源 2024/11/22 佚名
2 0

1、table重置的两个属性：

①border-collapse: collapse; /* 为表格设置合并边框模型 */

②border-spacing: 0; /* 设置在表格中的单元格之间出现的间距为0 */

代码：

<div class="fz">
    <div style="width: 600px;" class="bg-grey p10">
        <table class="bg-white">
            <tr>
                <th>序号</th>
                <th>开始时间</th>
                <th>结束时间</th>
                <th>备注</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>1</td>
                <td>2014/8/2</td>
                <td>2015/1/1</td>
                <td>时间都去哪儿了</td>
                <td><a href="#">编辑</a></td>
            </tr>
        </table>
    </div>
</div>

当只重置了td,th{padding:0} 没有设置边框的效果

Table自适应以及溢出的一些设置详解

设置td{ border:1px solid #ff4136;}的效果

Table自适应以及溢出的一些设置详解

设置table { border-collapse: collapse; border-spacing: 0; }的效果

Table自适应以及溢出的一些设置详解

2、单行溢出点点显示

.ell { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

几个必要条件是：

①一定要设定元素的宽度。

②white-space: nowrap; white-space 属性设置如何处理元素内的空白。nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。（防止文字往下撑开；即使你定义了高度，省略号也不会出现，多余的文字会被剪裁掉。）

③overflow: hidden; （防止文字横向撑开）

④text-overflow: ellipsis; ellipsis 当对象内文本溢出时显示省略标记（...）

3、表格的宽度设置

td{ border:1px solid #ff4136;}
.title{ width: 100px;}
.kaiyao{ width: 200px;}
.time{ width: 120px;}
<div class="fz">
    <div style="width: 800px;" class="bg-grey p10">
        <table class="bg-white pctW">
            <tr>
                <th class="title">标题</th>
                <th class="kaiyao">概要</th>
                <th class="time">时间</th>
            </tr>
            <tr>
                <td>单行点点点显示</td>
                <td>据说Chrome34+支持响应式图片，就是直接<img>标签上使用特定属性，就可以实现图片自动的响应式获取，大伙可以试试~</td>
                <td>2014-04-09 23:51</td>
            </tr>
            <tr>
                <td>连续字符换行</td>
                <td>zheduanzhongwenpinyinzhemechangwojiubuxingbuhuanhangyaobuliugezhongzizhileidemeirenfanyingjiusuanle</td>
                <td>2014-04-09 23:53</td>
            </tr>
        </table>
    </div>
</div>

运行效果：

Table自适应以及溢出的一些设置详解

问题：虽然为td设置了宽度，但因为单元格的流动性，使文字不存在溢出效果。而且表格的宽度是跟随单元格内容多少自动计算尺寸。

解决办法：添加

table{ table-layout: fixed;}

效果：

Table自适应以及溢出的一些设置详解

table-layout: fixed的作用在于，让表格布局固定。

存在问题：中文不会溢出，英文溢出?表格设定的宽度仍不起作用？

解决：为“概要”的两个单元格分别添加.ell 和.bk样式

.cell_bk { display: table; width: 100%; table-layout: fixed; word-wrap: break-word; }
.bk { word-wrap: break-word; }

运行效果：

Table自适应以及溢出的一些设置详解

存在问题：表格设定的宽度仍不起作用？。经计算，每个td都设定宽度的情况，单元格的实际宽度是按table宽度的比例计算。

例如：table的宽度为800px。 td的宽度分别为100px 200px 100px。在table-layout:fixed情况下。即为800的 1:2:1比例

实际td的宽度为：200px，400px，200px。如不想按比例计算，可以如下解决方案：

解决：删除表格最后一个单元格即“时间”引用的宽度限制class “.time”

效果：

Table自适应以及溢出的一些设置详解

“标题”和“概要”的宽度即为设定的100px和200px；

总结：

（1）要想设置表格的宽度，其必然要添加的属性是table-layout: fixed; 若没有该属性，即便设定了单元格的宽度.ell 和.bk也不会起作用。

（2）添加了table-layout: fixed属性后，①单元格的宽度用百分比表示。②单元格的宽度用px表示的时候，最后一个单元格不要设置宽度。

4、双栏自适应cell部分连续英文符换行

/*双栏自适应cell部分连续英文符换行*/
.cell_bk { display: table; width: 100%; table-layout: fixed; word-wrap: break-word; }

注意跟普通的浮动不一样，浮动是环绕，这个是双栏。

代码：

.cell{ display: table-cell; *display: inline-block;}
<div class="fz">
    <div style="width: 600px;" class="bg-grey p10">
        <div>
            <img src=" images/xxx.jpg" class="l p10" width="100">
            <div class="cell">
                <p class="cell_bk">
                    1977年的今天，28岁的拉齐奥中场球员Luciano Re Cecconi和两个朋友走入罗马的一家珠宝店。不知为何，他突然想来个恶搞玩笑。进入珠宝店后他就大喊，"别动！打劫！"他随后、也是最后的两句话是在珠宝店主冲出开枪命中他后说的，"It's a joke！It's a Joke！"30分钟后，他死了。
                    <br/><br/>
                    <span>//zxx:我xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
                    <h3>无处理</h3>
                </p>
            </div>
        </div>
    </div>
</div>

效果：（兼容各浏览器）

Table自适应以及溢出的一些设置详解

当设置图片img的width为200的效果

Table自适应以及溢出的一些设置详解

注意：只能是两栏效果，三栏时ie6/7浏览器有问题。

对比float可以可以实现两栏效果，只是当图片宽度改变的时候不是自适应，需同时改变右边div的padding-left的值

<img src=" images/xxx.jpg" class="l p10" width="200">
      <div style="padding-left: 220px;">
              <p class="cell_bk">
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
www.wwsws.com 伏龙阁资源网
39,976影音资源
44,792技术资源
21,817软件资源
651,128站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接