fix: table ellipsis not work at fixed column #2916 #3021

Author: tangjinzhou

components/table/__tests__/__snapshots__/demo.test.js.snap

@@ -1023,7 +1023,7 @@ exports[`renders ./antdv-demo/docs/table/demo/fixed-columns.md correctly 1`] = `
   <!---->
   <div class="ant-table-body-outer">
     <div class="ant-table-body-inner">
-      <table class="ant-table-fixed">
+      <table class="ant-table-fixed" style="width: 200px;">
         <colgroup>
           <col style="width: 100px; min-width: 100px;">
           <col style="width: 100px; min-width: 100px;">
@@ -1054,7 +1054,7 @@ exports[`renders ./antdv-demo/docs/table/demo/fixed-columns.md correctly 1`] = `
   <!---->
   <div class="ant-table-body-outer">
     <div class="ant-table-body-inner">
-      <table class="ant-table-fixed">
+      <table class="ant-table-fixed" style="width: 100px;">
         <colgroup>
           <col style="width: 100px; min-width: 100px;">
         </colgroup>
@@ -1291,7 +1291,7 @@ exports[`renders ./antdv-demo/docs/table/demo/fixed-columns-header.md correctly
 </div>
 <div class="ant-table-fixed-left">
   <div class="ant-table-header">
-    <table class="ant-table-fixed">
+    <table class="ant-table-fixed" style="width: 200px;">
       <colgroup>
         <col style="width: 100px; min-width: 100px;">
         <col style="width: 100px; min-width: 100px;">
@@ -1308,7 +1308,7 @@ exports[`renders ./antdv-demo/docs/table/demo/fixed-columns-header.md correctly
 </div>
 <div class="ant-table-body-outer">
   <div class="ant-table-body-inner" style="max-height: 300px; overflow-y: scroll;">
-    <table class="ant-table-fixed">
+    <table class="ant-table-fixed" style="width: 200px;">
       <colgroup>
         <col style="width: 100px; min-width: 100px;">
         <col style="width: 100px; min-width: 100px;">
@@ -1361,7 +1361,7 @@ exports[`renders ./antdv-demo/docs/table/demo/fixed-columns-header.md correctly
 </div>
 <div class="ant-table-fixed-right">
   <div class="ant-table-header">
-    <table class="ant-table-fixed">
+    <table class="ant-table-fixed" style="width: 100px;">
       <colgroup>
         <col style="width: 100px; min-width: 100px;">
       </colgroup>
@@ -1375,7 +1375,7 @@ exports[`renders ./antdv-demo/docs/table/demo/fixed-columns-header.md correctly
 </div>
 <div class="ant-table-body-outer">
   <div class="ant-table-body-inner" style="max-height: 300px; overflow-y: scroll;">
-    <table class="ant-table-fixed">
+    <table class="ant-table-fixed" style="width: 100px;">
       <colgroup>
         <col style="width: 100px; min-width: 100px;">
       </colgroup>
@@ -1919,7 +1919,7 @@ exports[`renders ./antdv-demo/docs/table/demo/grouping-columns.md correctly 1`]
 </div>
 <div class="ant-table-fixed-left">
   <div class="ant-table-header">
-    <table class="ant-table-fixed">
+    <table class="ant-table-fixed" style="width: 100px;">
       <colgroup>
         <col style="width: 100px; min-width: 100px;">
       </colgroup>
@@ -1935,7 +1935,7 @@ exports[`renders ./antdv-demo/docs/table/demo/grouping-columns.md correctly 1`]
 </div>
 <div class="ant-table-body-outer">
   <div class="ant-table-body-inner" style="max-height: 240px; overflow-y: scroll;">
-    <table class="ant-table-fixed">
+    <table class="ant-table-fixed" style="width: 100px;">
       <colgroup>
         <col style="width: 100px; min-width: 100px;">
       </colgroup>
@@ -1977,7 +1977,7 @@ exports[`renders ./antdv-demo/docs/table/demo/grouping-columns.md correctly 1`]
 </div>
 <div class="ant-table-fixed-right">
   <div class="ant-table-header">
-    <table class="ant-table-fixed">
+    <table class="ant-table-fixed" style="width: 80px;">
       <colgroup>
         <col style="width: 80px; min-width: 80px;">
       </colgroup>
@@ -1991,7 +1991,7 @@ exports[`renders ./antdv-demo/docs/table/demo/grouping-columns.md correctly 1`]
 </div>
 <div class="ant-table-body-outer">
   <div class="ant-table-body-inner" style="max-height: 240px; overflow-y: scroll;">
-    <table class="ant-table-fixed">
+    <table class="ant-table-fixed" style="width: 80px;">
       <colgroup>
         <col style="width: 80px; min-width: 80px;">
       </colgroup>

components/table/__tests__/__snapshots__/empty.test.js.snap

@@ -176,7 +176,7 @@ exports[`Table renders empty table with fixed columns 1`] = `
   <!---->
   <div class="ant-table-body-outer">
     <div class="ant-table-body-inner">
-      <table class="ant-table-fixed">
+      <table class="ant-table-fixed" style="width: 200px;">
         <colgroup>
           <col style="width: 100px; min-width: 100px;">
           <col style="width: 100px; min-width: 100px;">
@@ -198,7 +198,7 @@ exports[`Table renders empty table with fixed columns 1`] = `
   <!---->
   <div class="ant-table-body-outer">
     <div class="ant-table-body-inner">
-      <table class="ant-table-fixed">
+      <table class="ant-table-fixed" style="width: 100px;">
         <colgroup>
           <col style="width: 100px; min-width: 100px;">
         </colgroup>

components/vc-table/src/BaseTable.jsx

@@ -146,7 +146,7 @@ const BaseTable = {
   render() {
     const { sComponents: components, prefixCls, scroll, data, getBodyWrapper } = this.table;
     const { expander, tableClassName, hasHead, hasBody, fixed, isAnyColumnsFixed } = this.$props;
-
+    const columns = this.getColumns();
     const tableStyle = {};
 
     if (!fixed && scroll.x) {
@@ -158,6 +158,14 @@ const BaseTable = {
       tableStyle.width =
         typeof tableStyle.width === 'number' ? `${tableStyle.width}px` : tableStyle.width;
     }
+    if(fixed) {
+      const width = columns.reduce((sum, {width: w})=>{
+        return sum + parseFloat(w, 10);
+      }, 0);
+      if(width > 0) {
+        tableStyle.width = width + 'px';
+      }
+    }
 
     const Table = hasBody ? components.table : 'table';
     const BodyWrapper = components.body.wrapper;
@@ -169,7 +177,6 @@ const BaseTable = {
         body = getBodyWrapper(body);
       }
     }
-    const columns = this.getColumns();
     return (
       <Table class={tableClassName} style={tableStyle} key="table">
         <ColGroup columns={columns} fixed={fixed} />