帝王谷资源网

详解CSS的table-layout属性的用法
网页制作 2024/12/22 佚名
3 2
帝王谷资源网 Design By www.wdxyy.com

前言：

今天来和大家详细说一下table-layout属性的用法。  

 /*eg:设置表格布局算法*/
 table{
     table-layout:fixed;
 }

***本文关键词：table-layout属性值、定义和用法、固定表格布局、自动表格布局。

1定义和用法

 tableLayout属性用来显示表格单元格、行、列的算法规则。

 ①该属性指定了完成表布局时所用的布局算法。

 ②固定布局算法比较快，但灵活性不强。

 ③自动布局算法比较慢，却更能反映传统的HTML表。

2固定表格布局

 ①与自动表格布局相比，允许浏览器更快地对表格进行布局；

 ②其水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距、而与单元格的内容无关；

 ③通过使用固定表格布局，用户代理在接收到第一行后就可以显示表格。

3自动定表格布局

 ①其列的宽度是由列单元格中没有折行的最宽的内容设定的；

 ②由于其需要在确定最终的的布局之前访问表格中的所有内容，此算法有时会需要较长时间。

4table-layout属性值

  ①automatic：（默认值）列宽度由单元格内容设定；

 ②fixed: 列宽由表格宽度和列宽度设定；

 ③inherit：规定应该从父元素继承table-layout属性的值。

注：所有浏览器都支持 table-layout 属性。

任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"！！！

5理论不如实践，代码走起

 说的再多，不如看代码理解的快~下面大家一起来看这个栗子↓↓↓

（为了大家方便看代码，CSS和HTML代码我就写在一块了）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>table-layout属性测试</title>
        <style type="text/css">
            table.tb1 {
                table-layout: automatic;
            }
            table.tb2 {
                table-layout: fixed;
            }
        </style>
    </head>
    <body>
        <table class="tb1" border="1" width="100%">
            <tr>
                <td width="20%">aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
                <td width="40%">bbbbbbbbbbbbb</td>
                <td width="40%">ccc</td>
            </tr>
        </table>
        <br />
        <table class="tb2" border="1" width="100%">
            <tr>
                <td width="20%">aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
                <td width="40%">bbbbbbbbbbbbb</td>
                <td width="40%">ccc</td>
            </tr>
        </table>
    </body>
</html>

运行后，你会看到如下图所示：

详解CSS的table-layout属性的用法

这里我要说明一下，也许你的浏览器足够宽、也许你的单元格里的内容不够多，可能会看不出来二者的效果，这时候你需要缩小浏览器宽度或者增加单元格里的内容，就会看出二者属性值的不同效果啦~~~

标签：
tablelayout,属性,,tablelayout的用法,,css
帝王谷资源网 Design By www.wdxyy.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
帝王谷资源网 Design By www.wdxyy.com
www.wdxyy.com 帝王谷资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

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