`

设置table宽度,使其不随内容变宽

    博客分类:
  • CSS
阅读更多

页面中table 宽度设置width="600px"之后,宽度仍然不是固定的,当td的内容太多时,也不会换行,把table都挤变形了。

解决方法:

1.设置table的width属性,绝对宽度和相对宽度都可以

2.给table添加table-layout:fixed; 属性

第一行的<td>设置宽度,留一个不设,自由伸缩。

3.在td里面加上 style="word-wrap:break-word;" 自动换行,如果不想换行,可以将超出的内容设为隐藏,可以用省略号代替:

在td上面添加:

overflow:hidden;
white-space:nowramp;
text-overflow:ellipsis;

 

分享到:
评论

相关推荐

    JS手动改变table的宽度

    默认情况下,表格的宽度由其内容决定,但我们可以使用CSS或JavaScript来控制这个属性。 ### 使用JavaScript改变table的宽度 1. **通过DOM操作获取表格**: 首先,我们需要通过JavaScript的DOM(Document Object ...

    任意改变table表格td的宽度 支持表格TD拖拽

    5. **边界处理**:为了保持表格的完整性,可能还需要处理相邻td的宽度,避免一个td变宽时挤压或覆盖其他td。 6. **结束拖拽**:当`mouseup`事件触发时,停止对`mousemove`事件的监听,拖拽操作结束。 7. **动画...

    jquery拖动的table表格的宽度隐藏表格中的内容

    `可以使超出列宽的内容不可见。 为了在宽度达到特定阈值时自动隐藏内容,我们需要在`mousemove`事件处理函数中添加判断逻辑。如果新的宽度小于某个值,比如20像素,就将该列的`overflow`属性设置为`hidden`,否则...

    html中table为每个单元格设置不同颜色和宽度

    这种方式较为直观,但需要注意的是,如果所有单元格的宽度总和超过表格总宽度,那么表格的布局可能会变得不正确。 6. 在示例代码中,表格和单元格的样式被放在了同一个标签的style属性里。需要注意的是,这种做法...

    vue-easytable@2.16.3版本 拖动列 动态改变列宽大小实现

    实现效果:左键拖动表头右边框出现垂直于表格内的虚线作为参照,按住鼠标左键可左右移动虚线也会跟着移动,拖动到合适位置松开左键,虚线消失,拖动的表格该列 变宽/变窄 到鼠标位置,最窄为50px,最宽为600px,限制...

    固定 table宽度 table-layout: fixed

    这种情况下,设置表格和单元格的宽度为百分比可以实现表格填充屏幕,但这会引发新的问题,即当单元格内容过宽时,表格会变得不规则,高度会随着内容的增多而增加。 为了解决这个问题,我们可以利用CSS的`table-...

    vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)

    这使得列宽度根据其内容自动扩展,即使在滚动时也能保持对齐。 ```css table thead, tbody tr { display: table; table-layout: fixed; width: 100%; } ``` - **列宽度**:对于列的宽度,我们需要根据每列...

    jquery滑动改变table列宽度

    - 当`mousemove`事件发生时,根据鼠标的当前位置计算新的列宽,确保宽度值合理且不会使列变得过窄或过宽。 - `mouseup`事件用于停止监听`mousemove`事件,完成列宽的调整。 3. **DOM操作**: 使用jQuery的`width...

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

    "`,这将使所有单元格的宽度根据其内容自动调整,同时强制半角字符换行。但要注意,使用`table-layout:fixed;`后,避免在tr或td中使用height属性,因为这会影响表格高度的自适应。 完整代码示例: ```html &lt;table ...

    antd 表格列宽自适应方法以及错误处理操作

    当不给某列设置宽度时这一列的宽度等于: (表格宽度-有宽度列的宽度)/没有固定宽度的列的数量 也就是没有设置宽度的列会平分表格中余下的宽度 在antd 的表格中, 当你不设置表格滚动, 并且你给每一列设置了固定宽度, ...

    table边框线属性

    `将设置表格为1像素宽的实线黑色边框。 2. `border-collapse` 这个属性决定表格边框是否合并。默认情况下,浏览器会使用`border-collapse: separate;`,使得相邻单元格的边框之间有间距。而`border-collapse: ...

    bootstrap-table-fixed-columns冻结列,并完善排序、列宽和合并行

    3. **列宽调整**:列宽错位的问题得到了解决,这意味着用户可以自定义列的宽度,或者根据内容自动调整,而不会影响到冻结列的布局。这确保了表格的整洁和易读性,尤其是在列内容差异较大时。 4. **合并行**:修复后...

    实例讲解DataTables固定表格宽度(设置横向滚动条)

    默认的100%宽已经不适应了,我们需要固定表格的宽度以便更好地展示数据。本文将通过实例讲解DataTables固定表格宽度(设置横向滚动条),并解决表格宽度问题。 标题:实例讲解DataTables固定表格宽度(设置横向滚动条)...

    Table固定指定列进行横向滚动(可拓展)

    这可能涉及到计算滚动的距离,然后调整复制列的位置和宽度,使其与滚动后的真实列保持一致。 4. **可拓展性**:描述中提到`Index.js` 可以进行拓展,这意味着可以将同样的逻辑应用到垂直滚动上,例如固定表头或者...

    layui表格 列自动适应大小失效的解决方法

    例如,可能有全局样式设置了固定的列宽或者表格的`table-layout`属性被设置为`fixed`,这将阻止列自适应宽度。 2. **JavaScript事件未触发**:layui表格的列宽自适应可能依赖于某些JavaScript事件,如窗口的`resize...

    表格宽度拖动

    jQuery以其简洁的API和跨浏览器兼容性,极大地简化了DOM操作,使得动态调整表格宽度变得轻而易举。下面我们将深入探讨如何利用jQuery实现表格宽度拖动功能。 首先,你需要在HTML中创建一个基本的表格结构。表格通常...

    EasyUI 数据表格datagrid列自适应内容宽度的实现

    总的来说,实现EasyUI数据表格列宽自适应内容宽度的过程涉及到对数据表格的遍历、对文本内容的长度计算、列宽的动态设置以及对列宽调整功能的冻结。通过这些步骤,我们可以确保数据表格的列宽能够恰当地展示内容,...

    HTML常用table样式

    1. **边框样式**:通过CSS的`border`属性可以设置表格的边框宽度、样式和颜色。例如,`border="1px solid black"`将创建一个1像素宽的黑色实线边框。 2. **内边距与外边距**:`padding`控制单元格内部内容与边框...

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

    特别在不同分辨率的显示器以及不同浏览器中,如果设置了固定的宽高值,可能会导致显示效果不佳,从而影响用户体验。 数据表格的宽度在早期版本中,常常会通过CSS中的宽度属性来固定。例如,如果我们设置`width:1500...

    html 列表列宽可伸缩js

    js实现table标题栏宽度可变,随着鼠标的拖动选定宽度可伸缩

Global site tag (gtag.js) - Google Analytics