antd table 宽度_Table组件给列设置宽度不起作用，会按照内容自动伸缩

最新推荐文章于 2024-06-21 16:10:12 发布
最新推荐文章于 2024-06-21 16:10:12 发布
阅读量1.8k 收藏
点赞数
文章标签： antd table 宽度
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39795325/article/details/111495884
版权

Translation of this issue:

Table component to set the width of the column does not work, will automatically scale according to the content

Version

3.6.4

Environment

Mac, Chrome67

Reproduction link

Steps to reproduce

Set the width to 100px for each column of the Columns (or any of them)

What is expected?

The column width of the column that is expected to be set by the pixel is the set value, not the width assigned by the Table component itself

What is actually happening?

Table will elastically set the width of the column according to the width

Is this a bug? How can we reach the width of the column where the column width is set for some columns is the set width

weixin_39795325
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
10-16
在这种情况下，我们不为最后一列设置宽度，而是让其他列根据它们的宽度自动调整，这样表头与内容列就能对齐了。 总之，通过监听表格的滚动事件、获取可视宽度以及使用适当的CSS样式，我们可以实现Vue中滚动表格的...
element-ui表格自适应
gitlzb的博客
12-22 412
遇到问题先看文档再百度
antd设置纵向滚动条后，出现列宽被压缩，或是对不齐的现象
spray_wave的博客
08-14 2349
antd的Table同时设置横向和纵向滚动条的时候，会出现列宽被压缩或是对不齐的现象，如图： 此时，两种解决方案， 1、需要给scroll.x的值设置的比所有的列宽加起来的都大，包括非固定列的宽度（具体数字和百分比都可以） scroll={{x:2000,y:"500px"}} 2、可以单独的给发生压缩的列中render的return的div设置width，撑开它 { title: "Behavior DealId", dataIndex: "behaviorDealId", width:2
antdv 表格设置了列宽度但是不起效果 表格宽度仍然被内容撑得很长
最新发布
LRQQHM的博客
06-21 168
【代码】antdv 表格设置了列宽度但是不起效果 表格宽度仍然被内容撑得很长。
Ant-Design的Table表格设置列宽不生效问题
weixin_43905297的博客
10-10 4202
ant-design表格设置width不生效问题的解决
每日一菜之ant design中table的宽度设置不生效
baidu_35523558的博客
05-23 6013
1、确定<ta-table>中设置了:scroll="{ x : '100%', y : 200}"； 2、tableColumns中也设置了width； 3、width：120；width：120；width：120！！！重要的事情说三遍！！！ 不是width：'120'!!! 不要加单引号！！！不要加单引号！！！不要加单引号！！！ 依稀记得long long ago好像遇到过这个问题，最近又遇到了，api都翻烂了也没解决，后来临近中午下班突然想起来，试了一下，去掉单引号，结果设置生
ant.design.vue 设置表头宽度width总是没有效果
m0_58331939的博客
12-17 2132
ant.design.vue 设置表头宽度width总是没有效果
表格设置table-layout:fixed后对单元格宽度设置无效
09-25
在对设置表格设置table-layer:fixed样式后，发现表格中有一行合并过，其它没有合并的行的列宽会平均化，对列宽的设置会失效，下面有详细的解决方法，大家可以学习学习
解决Antd Table组件表头不对齐的问题
01-18
在使用Antd的table组件时，由于表头参数过多，于是设置了scroll属性，在其超出一定宽度后进行滚动 但是在添加了该属性之后，经常会出现表头不对齐的问题： 针对该问题Google 了一下解决方案，但大多不是很完善，为...
解决iview table组件里的 固定列 表格不自适应的问题
01-18
当在使用iview Table组件里固定列功能时 出现表格不自适应宽度问题 具体如下 解决这个bug 很简单 把组件里的 width 改为 minWidth 即可 columns: [ { title: '账户名', key: 'accountName', fixed: 'left', ...
antd中table展开行默认展示,且不需要前边的加号操作
01-22
前边不显示+，并且详细信息默认展开 在table中配置 <Table expandedRowKeys={this.store.chargeTableData.map(item> item.key)} //展开的行 expandIconAsCell={false} expandIconColumnIndex={-1} bordered //...
ant design table column 设置width不生效解决方案
weixin_30802273的博客
02-19 1万+
当td里的内容超出了width的范围时，会出现width不固定，也就是width不生效 解决方案： 　　设置scroll的width等于所有列宽之和（scroll={{x: 100%}}） 转载于:https://www.cnblogs.com/ruoshuisanqian/p/10401208.html...
antd vue 嵌套子表格遇到的问题总结
weixin_44090753的博客
05-19 1320
今天使用antd vue 的嵌套子表格遇到了一个问题，子表格中的操作栏上的按钮需要根据点击变化，也就是说要根据数据来更改状态，但是改变数据后页面没有渲染 <a-table :columns="columns" :scroll="{ x: true, y: 450 }" :data-source="data" rowKey="id" @expand="expand" :pagination="ipagination" @
解决 表格嵌套或者合并单元格引发的 单元格宽度失效问题
m0_46907690的博客
07-06 1014
解决方法 ： 在表格中加入 word-wrap: break-word; word-break: break-all;
Antd Vue 问题集合
asda82425的博客
04-25 353
1、table列宽问题 在滚动列时，如果要指定列宽，不要指定所有列宽，至少预留一列不执行列宽。 同时:scroll="{ x: width}", width的值要是所有列的宽度之和（包括固定列的宽度和没有指定列宽的列的宽度（本来要指定的宽度）） 同时：既然指定的列宽，就一定要强制换行，否则，指定的列宽在遇到英文不换行时还是会失效。 th{ word-wrap:break...
ant.design.vue 设置表头宽度width总是没有效果
fxqyilu的博客
07-22 1万+
寻找问题是一种能力，寻找问题的解决方法更是一种本事，假如遇到问题的时候没有解决的思路，那么就需要尝试一种新的思路，寻求不同的解决方式。 用vue.ant.design来设置表格的宽度，依照官方文档的提示可以用width来设置固定表头，但是当某一列的内容比较多的时候，发现怎么设置这个width都不起作用，或者不是自己想要的效果，如下： 代码： 效果却是如下： 这时候就可以结合一个样...
解决ant design vue中table表格内容溢出后，设置的width失效问题，超出的字用省略号代替
热门推荐
sinat_34241861的博客
04-16 1万+
style.css 通过设置css样式，可实现溢出内容以…代替，其中max-width的设置很重要，必须有 /*统一table表格的尺寸*/ .ant-table{ table-layout: fixed; } .ant-table-tbody > tr > td { max-width: 200px; min-width: 70px; border-bottom: 0...
antd table动态表头_React项目使用ant Table组件动态生成columns
05-25
要在React项目中使用Ant Design的Table组件动态生成表头，需要完成以下步骤： 1. 定义表格数据源 首先需要定义表格的数据源，可以使用一个数组来存储表格的数据，例如： ```javascript const data = [ { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park', }, { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park', }, { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park', }, ]; ``` 2. 定义表头数据源 接下来需要定义表头的数据源，可以使用一个数组来存储表头的数据，例如： ```javascript const columns = [ { title: 'Name', dataIndex: 'name', key: 'name', }, { title: 'Age', dataIndex: 'age', key: 'age', }, { title: 'Address', dataIndex: 'address', key: 'address', }, ]; ``` 3. 动态生成表头 在Ant Design的Table组件中，可以使用columns属性来指定表头数据源。为了动态生成表头，需要在渲染组件时动态生成表头的数据源，并将其传递给Table组件的columns属性，例如： ```javascript import React, { useState } from 'react'; import { Table } from 'antd'; const DynamicTable = () => { const [columns, setColumns] = useState([ { title: 'Name', dataIndex: 'name', key: 'name', }, { title: 'Age', dataIndex: 'age', key: 'age', }, { title: 'Address', dataIndex: 'address', key: 'address', }, ]); const handleAddColumn = () => { const newColumn = { title: `Column ${columns.length + 1}`, dataIndex: `column${columns.length + 1}`, key: `column${columns.length + 1}`, }; setColumns([...columns, newColumn]); }; return ( <> <button onClick={handleAddColumn}>Add Column</button> <Table dataSource={data} columns={columns} /> </> ); }; export default DynamicTable; ``` 在上面的代码中，我们使用useState钩子来定义表头的数据源，并渲染一个添加列的按钮。当点击添加列按钮时，会动态生成一个新的列，并将其添加到表头的数据源中。这样就可以动态生成表头了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值