[ant-design-vue]ant-design-vue的table列宽设置问题

最新推荐文章于 2024-06-21 16:10:12 发布

三知之灵

最新推荐文章于 2024-06-21 16:10:12 发布

阅读量7.8k

点赞数 1

分类专栏： VueJs 文章标签： vue.js

本文链接：https://blog.csdn.net/tjj3027/article/details/123921517

版权

VueJs 专栏收录该内容

72 篇文章 1 订阅

订阅专栏

table表格宽度问题

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>table</title> 
</head>
<body>

<table border="1">
  <colgroup width="200">
	  <col width="100"></col>
	  <col width="100"></col>
  </colgroup>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Januarsfasfdasfdafdasdfy</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

</body>
</html>

设置列宽都是100，希望当文字过长时隐藏，或者省略号显示，但是td被撑开，无法实现设定宽度

在这里插入图片描述

网上提供的解决方案：

1.方法1

table-layout: fixed;

tr,td {
	white-space: nowrap;
 	text-overflow: ellipsis;
 	word-break: break-word;
 	overflow: hidden;
}

无效
主要原因发现是table没有给定宽度，所以fixded的列调整列宽存在问题

在这里插入图片描述

三知之灵

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
[ant-design-vue]ant-design-vue的table列宽设置问题

table表格宽度问题<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>table</title> </head><body><table border="1"> <colgroup width="200"> <col width="100"></col> <c
复制链接

扫一扫