`
MaximusGet
  • 浏览: 14870 次
  • 性别: Icon_minigender_1
  • 来自: 南京
文章分类
社区版块
存档分类
最新评论

解决table布局被撑大

JSP 
阅读更多

项目一个JSP页面采用table布局,今天做一个模块的时候,td里面放置了一个div,div中又包含一个table,结果因为div中table的某一列值太长,将外面的td撑到很大,而div设置了固定高度和滚动不会被撑大,导致外层td很高一段空间都是空白。为了解决这个问题费尽周折,后来在网上淘到这么一段代码,经过测试解决。

在最外层table加上

style="table-layout:fixed;word-wrap:break-word;word-break;break-all;height: 400px;overflow: hidden;"

 被撑大的列加上

style="height: 300px;overflow: hidden;"

 

td中的div加上

style="height:300px;vertical-align:top; overflow:scroll; overflow-x:auto; overflow-y:auto;"

不管div中的table列值多大,都不会撑大表格了,当然还可以让div横竖向滚动看到全部值。

分享到:
评论

相关推荐

    网页图片把表格撑破解决办法-dw中图片把网页撑破解决方法

    对于表格元素,可以设置`table-layout: fixed`,并为单元格指定宽度,这样可以防止内容撑大表格: ```css table { table-layout: fixed; width: 100%; } td { word-wrap: break-word; overflow: hidden; text-...

    让你的表格不因被内容撑破而变形

    在网页设计与开发的过程中,经常会遇到表格或者布局因为内容(特别是图片)的尺寸过大而导致页面变形的情况。这种问题不仅影响了网页的美观性,还可能降低用户体验。因此,掌握如何让表格不会因为内容撑破而变形是...

    html div没有被撑开的原因及解决办法

    display: table; clear: both; } ``` 然后将`clearfix`类添加到父`div`上。 **原因二:绝对定位(position: absolute)** 如果`div`内部的子元素被设置了`position: absolute`,它会从正常文档流中移除,不再...

    CSS 数字和字母将容器撑大问题解决

    在网页设计中,CSS(Cascading Style Sheets)是用于控制网页元素样式的重要工具。有时候,我们会遇到一个棘手的...根据不同浏览器的兼容性和需求,选择合适的方法能有效避免容器被撑大,确保页面布局的整洁与美观。

    VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法

    在本文中,将会详细探讨如何实现这一功能,并且提供动态监测浏览器高度来设置表格高度的解决方案。 ### ElementUI el-table元素的基础使用 ElementUI中的el-table元素提供了丰富的接口,允许开发者快速构建表格。...

    解决Layui 表格自适应高度的问题

    然而,在实际操作中,可能会遇到Layui表格无法自动调整高度的问题,导致内容被遮挡或者布局不协调。本文将详细介绍如何解决这一问题。 首先,我们需要了解Layui表格的基本结构和样式。Layui表格由多个`.layui-table...

    css实现不再让内容把td撑开的常用解决方法

    在网页设计中,经常遇到一个问题,即表格中的单元格(td)内容过多时,会导致单元格自动撑大,影响整体布局。为了解决这个问题,我们可以采用CSS来控制单元格的内容显示,使其不再自动撑开单元格。下面我们将详细...

    css1--关于float的div撑不起父div的问题

    标题中的“css1--关于float的div撑不起父div的问题”指的是在CSS布局中常见的一个技术挑战。在网页设计中,我们经常使用`float`属性来实现元素的浮动,以便进行布局,比如创建多列布局或者使文本环绕图片。然而,...

    HTML整片布局.pdf

    - **多行文本**:可以利用表格显示模式(`display: table`和`display: table-cell`)结合`vertical-align: center`来实现。 - **块元素**:可以通过绝对定位(`position: absolute`)结合`left: 50%`和`top: 50%`,再...

    用CSS控制表格或单元格强制换行,防止表格被英文单词或中文撑大

    在网页设计中,表格和单元格的布局经常遇到一个问题,那就是连续的英文单词或中文字符会将容器撑大,导致表格的样式不符合预期。为了解决这一问题,我们可以利用CSS来实现强制换行,确保内容不会溢出容器。本文将...

    HTML页面自适应宽度的table(表格)

    大部分列可以设定为固定的像素宽度,以确保关键信息的清晰展示。例如,对于日期、分类等固定格式的数据,我们可以设定一定的宽度,如50px、150px等。然后,留出一列不设宽度,通常用于显示可能长度不一的内容,如...

    html 表格比较宽溢出的解决方法

    其次,当页面的布局使用了CSS框架,比如Bootstrap时,我们可以借助框架提供的类或工具来解决表格宽度问题。例如,在Bootstrap中,可以将表格放入一个`.container`或者`.container-fluid`的容器中,利用框架的栅格...

    解决Layui数据表格的宽高问题

    `,则该表格的显示宽度会被限定在1500像素。然而,这样做在屏幕分辨率较低或者使用移动设备浏览时,会导致布局出现问题,如页面右侧出现不必要的空白区域。 高度方面,在Layui数据表格中,如果固定高度值,比如`...

    解决IE6、IE7、IE8、Firefox兼容的两种方案

    但在IE系列浏览器中,容器的高度可能会被内部的内容撑大,导致高度限定失效。 - **解决方案**:为了避免这种问题,尽量避免为容器设置固定高度,而是采用百分比高度或者通过使用`min-height`配合`overflow:auto`...

    html中表格td内容自动换行

    强制换行是为了遇到一些超长的连续字符串(比如 aaaaaaaaaaaaaaaa)时不撑大布局。我们可以使用 `word-break: break-all;` 来实现强制换行。 在 Firefox 中不支持 `word-break` 属性,所以我们需要加 `overflow: ...

    拿什么来拯救你,我的table(海玉博客)

    总的来说,尽管table在布局方面的地位已被Div+Css取代,但在数据展示和组织方面,它仍然具有很高的价值。合理使用table及其相关的CSS属性和标签,可以有效解决各种显示问题,提高数据的可读性和页面的性能。在现代...

    通过css样式控制单元格内超长文本自动换行.doc

    CSS(Cascading Style Sheets)是一种用于描述HTML文档样式的语言,以解决HTML文档的布局、样式、文字排版等问题。今天,我们将讨论如何使用 CSS 样式控制单元格内超长文本自动换行,并解决浏览器兼容问题。 ...

    字符不会撑大表格的常见css样式

    为了解决固定宽度表格中字符输入导致的宽度撑开问题,可以采用固定表格布局算法,并结合适当的CSS属性如word-wrap, word-break以及white-space,加上JavaScript动态调整策略,从而达到字符输入不会撑大表格的目标。...

    Web应用前端技术的探索与实践

    3.3.4 解决DIV被撑爆的问题 12 3.3.4.1 DIV撑爆的问题 12 3.3.4.2 图片撑爆问题的解决办法 13 3.3.4.3 文字撑爆问题的解决办法 13 3.4 Java Web应用的DIV布局 14 4 主流邮件系统前端开发的研究 19 4.1 21cn企业邮 19...

Global site tag (gtag.js) - Google Analytics