table元素无法固定列宽,width设置无效

2023-10-26

之前在做table的时候,因为不是用来做数据的展示的,所以对于具体的格式没有太高的要求,所以没有去深入了解,这次在做一个数据展示列表的时候使用table,因为假设每一个单元格数据是没有固定长度的,所以为了界面不会因为数据的变化格式发生大变化,所以希望table的每一列都是固定宽度。然后使用js对数据处理。

但是在使用css设置时:

.item_list {

display: inline-block;

position: absolute;

right: 5%;

top: 45px;

width: 40%;

height: 90%;

border: 1px solid white;

border-radius: 5px;

 

table-layout: fixed;

text-align: center;

overflow-y: scroll;

}

.item_list tr td {

width: 22%;    //一共五列,注意因为有边框,所以不能100%

}

 

.item_list tr>:first-child {      //第一列显示序号,所以宽度较小

width: 8%;

}

这样设置之后每一的宽度还是随着列单元格中的内容长度发生变化。

 

百度各种资料,对比之后发现table还有其他的属性需要设置,才能达到固定列宽的目的。

需要再添加.item_list{

word-break: break-all;

word-wrap: break-word;

}

 

这样之后达到了固定列宽的作用,不过还有个问题这样,单元格内容过长会自动换行导致行高不一致,这个可以采用tbale属性解决,也可以使用js在数据加载时对数据进行处理来解决这个行高的问题

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

table元素无法固定列宽,width设置无效 的相关文章

  • CSS 宽度和高度属性的最大像素值是多少?

    最大有效值是多少pxCSS 的值width and height属性接受吗 我目前正在构建一个网络应用程序 它创建一个非常大的可缩放容器元素 我想知道实际的限制是什么 在元素上使用某些浏览器附带的 CSS 检查器10000000000px
  • 更改条形图中条形的宽度 (R)

    我想知道如何更改 barchart 函数中条形的宽度 这是代码 rater1 lt c 0 75 0 66 0 73 0 63 barplot rater1 ylim c 0 1 axes TRUE names arg c A B C D
  • CSS学习之路: 基础学习篇

    css基础 一 css3 概述 1 1 什么是css Cascading style sheets 层叠样式表 级联样式表 简称样式表 1 2 css作用 对页面中html元素进行美化 1 3 HTML和css的关系 HTML 负责页面结构
  • 等宽的垂直按钮

    这是两个垂直排列的按钮 我需要它们的宽度相等 我不知道 包装的尺寸是多少 按钮上将显示什么文本 因此我不能使用像素宽度 按钮的宽度是多少 按钮必须位于左侧 按钮上的文本必须居中对齐 我不能使用 100 宽度 因为它不美观 我无法使用 Fle
  • 静态字符串中的非固定宽度文本 - Jasper Reports

    正如我从这篇文章以来了解到的那样 如何在 Jasper Reports 中相对于数据宽度拉伸文本字段 https stackoverflow com questions 8979134 how to stretch field horizo
  • 我的 iPhone 认为宽度为 980 像素

    我正在尝试创建一组三个很简单媒体查询来处理各种屏幕尺寸 经过一番绞尽脑汁之后 我得出了以下结论 media all and min width 0px and max width 480px styles here media all an
  • 使用 CSS 时画布会拉伸,但使用“width”和“height”属性时画布会拉伸

    我有 2 个画布 其中一个使用 HTML 属性width and height另一个使用 CSS 来调整其大小
  • 在 Chrome 中,如何使样式选择菜单的宽度达到父容器的 100%?

    我正在创建一个带有文本框和样式选择菜单的表单 本质上是一个 DIV 其中包含其他 DIV 我希望这两个项目具有相同的宽度 最好不是固定的像素宽度 而是 100 的可用空间 我有 div class field div
  • libgdx- pixmap:我可以以某种方式改变线的宽度吗?

    我想画一条线 然后生成一个纹理 使用 libgdx 我发现使用像素图从圆形 矩形和线条创建纹理非常简单 但我没有找到如何设置绘制形状的线宽 是否可以设置像素图的线宽 这是我到目前为止得到的代码 我尝试画两个实心圆并用一条线将它们连接起来 P
  • 宽度等于动态高度平方[重复]

    这个问题在这里已经有答案了 当高度为父级 div 的 时 是否可以使用 css 或 js 将元素的宽度设置为与其高度相匹配 如果调整浏览器窗口的大小 子 div 也需要更改大小 Example body html height 100 pa
  • HTML Div 宽度溢出:自动?

    我正在创建一个div像下面这样 编辑 这是一个例子 table tr td div style max height 15em div td tr table
  • 如何根据 iPhone 中的文本大小动态增加按钮宽度?

    我以编程方式创建了 10 个按钮 并在按钮中设置了标题 现在我想动态增加按钮框架大小 它取决于文本 我给出了一些条件并设置了框架大小 但我如何设置确切的帧大小取决于文本 动态获取文本 我的示例代码是 float x 0 y 0 w h 20
  • XAML,将 Width 和 Height 属性绑定到其他控件的相同属性

    我正在尝试创建反射效果 它工作得很好 只是我必须对一些值进行硬编码 这是我的 XAML
  • iPhone 4 网络应用程序浏览器宽度:960 还是 981?

    Output 宽 981 高 425 为什么 维基百科说 w 应该是 960 Regards UPDATE 我发现问题与viewport元标记 下面的代码做了我想看到的事
  • Android TableLayout 宽度

    我有两列TableLayout作为滚动视图的唯一子视图 第一列包含TextViews labels 并且第二列包含EditText Spinner DateWidget等等 价值观 尽管我已指定android layout width fi
  • CSS 使文本框填充所有可用宽度

    我的网页中有以下 行 div style width 100 Some Text div
  • iText7:如何获取段落的实际宽度

    在添加到文档之前 我需要知道段落的宽度 以磅为单位 我在这里搜索并找到了 Alexey 关于段落高度的答案 所以我用宽度做了它 但它不起作用 无论段落有多长 始终返回矩形的宽度 我尝试了这段代码 private float getRealP
  • iframe 主体删除空间

    我的 iframe 风格为style width 100 几乎覆盖了页面宽度 但它在左侧和右侧留下了一个小边距 所以我添加了body margin 0px 删除空间 它有效 但问题是删除边距影响其他事物 例如段落 p inside 有没有办
  • 如何在 Libgdx 中获取字符串宽度?

    我想知道如何获得width我的字符串的像素数 位图字体 API 测量宽度String你用你的Font并得到bounds of the String 你要画画了 BitmapFont getBounds String str width 位图
  • 将按钮文本放在一行上

    我的按钮文本在 safari 中显示在一行上 即使在初次单击后 但是在 google chrome 上 当您第一次到达该按 钮时 我的按钮将显示在一行上 但是当您浏览更多帖子并再次遇到 加载更多 按钮时 文本搞砸了 这只发生在谷歌浏览器上

随机推荐

  • Binutils工具集 解析

    对于嵌入式系统开发 掌握相应的工具至关重要 它能使我们解决问题的效率大大提高 目前 可以说嵌入式系统的开发工具是GNU的天下 因为来自GNU的GCC编译器支持大量的目标处理器 除了GCC 还有一个非常重要的 同样来自于GNU的工具集 too
  • 关联类及如何在语言级别实现多元关联

    1 关联类 An association class is used to model an association as a class Association classes often occur in many to one and
  • JPA & Hibernate 注解

    1 Entity name EntityName 必须 name 为可选 对应数据库中一的个表 2 Table name catalog schema 可选 通常和 Entity 配合使用 只能标注在实体的 class 定义处 表示实体对应
  • linux mipi接口驱动,rp3399之mipi接口ov4689摄像头驱动

    rp3399之mipi接口ov4689摄像头驱动 rp3399之mipi接口ov4689摄像头驱动 linux的驱动程序移植的精髓在于移植而不是编写 移植不代表简单了 驱动程序包一般有几个或者几十个文件 另外有设备树进行配置资源 一个驱动的
  • chatGPT查询api的余额

    代码如下 import requests url https api openai com dashboard billing credit grants api key 填写你的key headers Authorization Bear
  • c++学习之菱形继承

    1 菱形继承 2 代码示例 采用虚继承解决多义性 并且同名数据保证只有一份 include
  • Python之选择结构(案例2:个税计算系统)

    案例2 个税计算器 一 需求分析 开发一个个人所得税计算器 用户输入工资和五险一金 计算纳税额和到手工资 参考 http www gerensuodeshui cn 应纳税所得额 工资收入金额 各项社会保险费 起征点 5000元 应纳税额
  • 音视频开发编程技术(一):视频编码格式

    1 视频是什么 所谓视频 其实就是将一张一张的图片连续的放出来 类似于播放放幻灯片一样 由于人眼的常规可视帧数是每秒24帧 也就是说当每秒播放的图片数量大于24张时 人眼反馈回大脑的画面就是连续的动作 所以 将多张图片保存下来并连续快速播放
  • 汇编程序设计与计算机体系结构,汇编程序设计与计算机体系结构:软件工程师教程...

    汇编程序设计与计算机体系结构 软件工程师教程 语音 编辑 锁定 讨论 上传视频 汇编程序设计与计算机体系结构 软件工程师教程 是2019年4月1日机械工业出版社出版的图书 作者是 美 布莱恩 R 霍尔 BrianR Hall 凯文 J 斯郎
  • Whitelabel Error Page

    启动springboot后 发现总是提示url路径错误 但是反复检查又发现好像没什么错误 注意 检查代码包是不是放在与application启动类同包下 因为springboot启动时会加载这个类同包的组件 不在一个包下就加载不了所以导致识
  • tcp短连接TIME_WAIT问题解决方法大全(1)——高屋建瓴

    tcp连接是网络编程中最基础的概念 基于不同的使用场景 我们一般区分为 长连接 和 短连接 长短连接的优点和缺点这里就不详细展开了 有心的同学直接去google查询 本文主要关注如何解决tcp短连接的TIME WAIT问题 短连接最大的优点
  • 【黑苹果教程】ELAN,FocalTech 以及 Synaptics 触控板驱动

    触控板上的手势操作应该是macOS的一大特色 但是黑苹果装完之后 很多人发现别说手势 很多基本的功能触控板都不能实现 此时你需要安装触控板驱动 本文参照osxlatitude论坛的ELAN FocalTech and Synaptics S
  • NMOS和PMOS详解以及电路设计

    一 简介 MOS管 是MOSFET的缩写 MOSFET金属 氧化物半导体场效应晶体管 简称金氧半场效晶体管 Metal Oxide Semiconductor Field Effect Transistor MOSFET 其中 G是栅极 S
  • apache 中 httpd.conf 的配置详解

    部分 1 全局环境 血泪提醒 rootDocument里面一定要有index php 或者index html 不然403错误 T T 本部分的表示将影响所有Apache的操作 例如 所能处理的并发请求数或配置文件地址 ServerType
  • Python拾遗2

    Python高级编程 第2版 1 常见的装饰器模式 参数检查 缓存 代理 上下文提供者 2 Python3新增函数注解 使用场景 类型检查 让IDE显示函数接受和返回的类型 函数重载 其他语言之间的桥梁 适配 谓词逻辑函数 数据库查询映射
  • python的输入与输出

    python输入 input 与输出 print 一 输入 input 在python3中 input会将接收到的用户输入自动存储为字符串类型 username input 输入用户名 cuihua print username cuihu
  • nlp-位置编码解析

    看到这里 是否记得前面提及Vaswani推出的Transformer结构 那么如果不使用RNN结构 是怎样表示位置信息的呢 在提信息位置技术前 先简介以下RNN和CNN RNN的序列结构不适合大规模并行训练 因为大家都知道 RNN对于序列问
  • matlab lstm工具箱,[转载]RNN以及LSTM的Matlab代码

    implementation of LSTM clc clear close all training dataset generation binary dim 8 largest number 2 binary dim 1 binary
  • LeetCode 667. 优美的排列 II

    题目链接 https leetcode cn problems beautiful arrangement ii C 代码如下 class Solution public vector
  • table元素无法固定列宽,width设置无效

    之前在做table的时候 因为不是用来做数据的展示的 所以对于具体的格式没有太高的要求 所以没有去深入了解 这次在做一个数据展示列表的时候使用table 因为假设每一个单元格数据是没有固定长度的 所以为了界面不会因为数据的变化格式发生大变化