当前位置: 首页 > 知识库问答 >
问题:

前端 - 表格组件中如何实现指定一列的宽度,内容自动换行?

颜思淼
2023-08-31

表格中指定一列的宽度,内容按照宽度限制自动换行,单元格的高度由实际内容行数决定
image.png
如何在表格组件中实现这个效果?

共有1个答案

夔光霁
2023-08-31

th 的单元格指定该列的宽度, 然后修改单元格内的换行样式规则

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Document</title></head><body>  <style>    td{      word-break: break-all;    }  </style>  <table>    <tr>      <th>name</th>      <th>age</th>      <th style="width: 50px;">desc</th>    </tr>    <tr>      <td>bob</td>      <td>16</td>      <td>iwnoawnfwnfowaenfoawneofnawefnoawenfowanf</td>    </tr>  </table></body></html>

使用组件库的话会默认实现
element-table

 类似资料:
  • 本文向大家介绍EasyUI 数据表格datagrid列自适应内容宽度的实现,包括了EasyUI 数据表格datagrid列自适应内容宽度的实现的使用技巧和注意事项,需要的朋友参考一下 项目初期在加载数据表格的时候为了提高表格数据渲染速度,设置了默认宽度。 现需求需要加一个表格自适应的功能,触发改功能,改变列宽度,但是不重新渲染表格,不发生数据请求。 设计思路,遍历每项的所有数据,比较字节符串长度,

  • 问题内容: 鉴于以下几点,我如何使我的最后一列自动调整大小?(最后一列应自动调整内容的宽度。假设我只有1 li元素应该收缩,而我只有3 li元素等等): CSS: 问题答案: 以下将解决您的问题: 灵活的基于类的解决方案 一种更灵活的解决方案是创建一个类,并将其应用于您要确保其内容适合一行的任何列: 然后在您的HTML中:

  • 如上图所示 该边框每个元素的宽度为8px,高度为1px,间距为2px,radius为4px 要如何实现? 看到网上比较多的方案是 border-image 引入切片的图片来实现,有什么不需要引入图片纯代码的方法吗?

  • 本文向大家介绍jQuery实现鼠标可拖动调整表格列宽度,包括了jQuery实现鼠标可拖动调整表格列宽度的使用技巧和注意事项,需要的朋友参考一下 实现鼠标可拖动调整表格列宽度 如图:   一、引入文件: 二、TABLE 以上html只是作为Demo 并不是我项目中所实际使用的,并且在测试的时候 也未能实现。郁闷... 三、实现表格可拖动 在项目使用过程中 发现无需引入store.js <th>也无需

  • 每个表格独立,放置在一个页面上,根据数据量的不同,长短不一。但是表格能够紧凑的排布,不会有空白。