table宽度一样宽_table自适应宽度
WEB应用的页面,表格的表现形式是常常遇到的,在列数有限的前提下,如何将各列中的内容自适应到不同分辨率的屏幕,这应该是一个比较容易遇到的问题,下面就来谈一谈我对这类问题的解决与看法。
将所有列设置为固定宽度,显然是不能满足此类要求的,但是若把全部的列都设置为百分比,恐怕在某些尺寸,或分辨率下,会变得很难看。在Bigtree看来,比较习惯于用如下的方式来处理——在表格列数不是很多的前提下——将大部分列宽用固定值设置死,留下一列不设置宽度,将table的宽度设置为屏幕的百分比(譬如95%、98%等)。
例:
序号 | 分类A | 分类B | 名称 | 说明 | 操作 |
……
在本例中,名为“说明”的列,内容比较长,个人认为可以将此列设置为浮动宽度列,用以自适应页面的宽度。
但是当该表格中出现长度比列幅宽的半角字符时,td的宽度会被内容撑破,应该如何解决呢?
解决此问题的方法是:在明细行的td中,追加style="word-wrap:break-word;",这样做可以使半角连续字符强制换行,不至于撑破列宽。
例:
……
应用此方法,针对设置了width宽度的td列可以解决,但是如果没有设置宽度的td列,是无法生效还是会被撑破td的,应该如何解决呢?
解决此问题的方法是:在定义表格时,追加style="table-layout:fixed;",这样做可以使半角连续字符强制换行,不至于撑破列宽。需要注意的是,使用此参数后,不要轻易在tr(行)或td(列)中加入height属性,会使table不再被内容撑出适合的高度。
例:
……
此方法适用于IE与FireFox浏览器。
table宽度一样宽_table自适应宽度相关推荐
- 关于div容器高度随着浏览器宽度按照宽高比自适应的问题(css解决方案)
div容器html代码: <div class="swiper"></div> div容器样式代码(此处的31.25%为div容器内容的宽高比,比如div内 ...
- html设置模块宽度为200像素,css 宽度(CSS width)
DIV CSS宽度width样式属性 CSS 宽度是指通过CSS 样式设置对应div宽度,以下我们了解传统html宽度.宽度自适应百分比.固定宽度等宽度知识. 传统Html 宽度属性单词:width ...
- html div自适应布局,css两个div自适应宽度布局方法大全(精华)
第一种方法:BFC块级格式化上下文 -----左边固定宽度----- ----------------------------------------右边自适应宽度------------------ ...
- html 页面自适应table,HTML页面自适应宽度的table表格
这篇文章主要介绍了HTML页面自适应宽度的table(表格),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 WEB应用的页面,表 ...
- 怎么设置table(表格)手机端自适应宽度
我们在wordpress文章页面经常会用到表格,有些是从其他网页或者文档复制粘贴过来的,在电脑设备网页上都能很好的展示,但是在移动设备上或者低分辨率设备上却经常撑破列宽,很是影响美观和客户体验.这里就 ...
- html表格宽度拖拽,Js拖拽实现改变Table的列宽解决方案
Js拖拽实现改变Table的列宽 如题,楼主是Js小白,最近遇到问题,需要用Js实现GridView的列拖拽改变大小,在网上找到一段代码如下: function MouseDownToResize(o ...
- html怎么设置左侧区域宽度,【CSS】左侧定宽、右侧宽度自适应布局
又是一道前端的面试题,请实现页面布局,包括页头.内容区域.页脚三部分,其中内容区域为左右分栏,左栏定宽200px.右栏自适应宽度. 虽然是以前应用中碰到过的布局,但现场还是没写对,来重新做一下. 双列 ...
- 使用负边距创建自适应宽度的流体布局
随着越来越大的浏览器的出现及普及,网站界面如何能满足不同分辨率浏览器使用者的浏览需求,逐渐成为前端开发工程师必须面对的问题.目前国内门户很多都进行了改版,采用目前的主流–960px左右的宽度. 我认为 ...
- 表格td的宽度不随内容自适应
表格td的宽度不随内容自适应 在table上添加 style="table-layout:fixed;word-break:break-all;" 然后在相应的td上添加宽高即可. ...
- [Winform]DataGridView列自适应宽度
引言 在做winform项目中,数据控件DataGridView的使用多多少少是会用到的,如果不设置它的属性,默认情况下是不会自适应宽度的,你想查看某项的数据,就不得不将标题栏拖来拖去,挺烦的. 方法 ...
最新文章
- 12个python超强学习网站!加python书籍推荐!( 入门python自学推荐!建议收藏!)
- html中红色星号,谨慎使用CSS中的星号(*)通配符
- HTML5实战——canvas 绘制钟表
- 阅读量PHP设计,zblogPHP如何修改文章阅读量
- java stream 原理
- Google 地图 API 参考
- 【Docker】docker bash: sudo: command not found
- 二维码编解码 Java调用示例代码
- wpf listbox绑定不跟新_苦逼的程序员,Python又有新版本3.9,跟还是不跟?
- mybatis 链接DB2查询报错,必需的字符转换器不可用。 ERRORCODE=-4220, SQLSTATE=null
- h264格式视频转mp4
- python处理word页码_word——插入页码
- 人工智能剥夺就业岗位?不妨听听马斯克是如何建议的
- 基于xsh的vbs脚本的使用(简介)
- 模数转换器(ADC)
- vue操作easyui中的DataGrid
- 如何使用vps 异地组网_异地组网简要配置指南
- 驱动专题:第四章MTD及Flash驱动 3. nandflash 详细硬件特性
- Oracle单机部署:GI安装
- IDEA 2021的下载与安装
热门文章
- java脚本引擎Rhino 入门
- 【Matlab代码】Sierpinsk地毯
- RabbitMQ虚拟主机
- 「R shiny基础」使用shinyapp分享你的Shiny应用
- allegro画两层板板步骤
- 生成的SMILES以及对应的图像的评价指标【2】
- 我们编写的python代码在运行过程中_在 Rust 代码中编写 Python 是种怎样的体验?...
- 「津津乐道播客」#380 津津有味:厨房重地举目皆是刚需,将就不得
- 增强现实技术AR的50个应用场景
- python中dot函数_np.dot()函数的用法详解