• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html/xhtml > 固定 table宽度 table-layout: fixed

固定 table宽度 table-layout: fixed

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-05

本文主要包含table,固定宽度等相关知识,佚名 希望在学习及工作中可以帮助到您
为了让表格能够填充屏幕(剩余空白区域),常将其宽度属性定义为:100%,单元格也是用百分数来定义。

但这样就会出现问题: 如果单元格中的文本超过宽度限制,就会自动换行,高度自动增高,导致整个表格的样式参差不齐,很难看。

很容易想到的解决方法是,禁用文本换行: white-space:nowrap; overflow:hidden;

So easy! 但效果仍然出乎意料:文本全部在一行显示,宽度自动加宽,甚至还超出了父容器,overflow完全没有起作用!

怎么回事? 百分比的原因么? 但是如果使用静态的固定宽度,就失去了表格的灵活性。

于是乎,不费吹飞之力地找到了终极解决方案: 固定表格宽度: table-layout: fixed;

顺便做了个简易的效果图,参考下:

您可能想查找下面的文章:

  • HTML table 直列化格式详解
  • 详解HTML中table表格的frame和rules属性
  • HTML中table表格标签的基础学习教程
  • html css 控制div或者table等固定在指定位置的实现方法
  • 关于table表格中的内容溢出布局方法
  • Table显示你要显示的边框代码
  • 浅析响应式框架中,table表头自动换行的快速解决方法
  • 深入解析HTML的table表格标签与相关的换行问题
  • 用table表格来调整表单控件的格式让它好看一些
  • 拿什么来拯救你,我的table(海玉博客)

相关文章

  • 2017-08-05HTML中rel属性分析
  • 2017-08-05使用thead、tfoot、 tbody制作一个表格
  • 2017-08-05HTML (css样式规范)必看篇
  • 2017-08-05Html 元素隐藏的几种方式
  • 2017-08-05浅谈html中input只读属性readonly和disable的区别
  • 2017-08-05语义化的HTML结构怎么理解
  • 2017-08-05使一个input文本框随其中内容而变化长度的方法
  • 2017-08-05html tbody 用法
  • 2017-08-05深入解析HTML的table表格标签与相关的换行问题
  • 2017-08-05HTML中的base标签使用详解

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • HTML是网页制作者必须要学习掌握的
    • html在消息按钮上增加数量角标的实现代码
    • 基础 HTML之目录问题(相对路径和绝对路径区别)
    • HTML基本结构全面了解
    • 让网站在浏览器网址前面显示小图标的方法
    • html悬浮框架的设置使用示例(iframe加载html)
    • W3C教程(5):W3C XML 活动
    • HTML代码书写规范指南
    • HTML页面标签隐藏的方法
    • Form表单提交刷新页面不跳转源码设计

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有