From 589f28de96adb0aa3c82b1bef6d215ee220f3726 Mon Sep 17 00:00:00 2001
From: BigHead Fan <bbbbighead@gmail.com>
Date: Tue, 4 Jul 2017 20:59:12 +0800
Subject: [PATCH 1/2] fix table header width adjustment logic when
 TableHeaderColumn is using fix with or relative width(in percentage %)  - no
 need to re-calculate and using fix width when scroll is happening, it will
 cause side effect which will make header width will only grow but not restore
 to original size when you resize outside window size(drag window large and
 small back and forth)

---
 examples/js/basic/basic-table.js | 10 +++++-----
 src/BootstrapTable.js            | 34 +-------------------------------
 2 files changed, 6 insertions(+), 38 deletions(-)

diff --git a/examples/js/basic/basic-table.js b/examples/js/basic/basic-table.js
index e4f0abce1..f9f1a47ad 100644
--- a/examples/js/basic/basic-table.js
+++ b/examples/js/basic/basic-table.js
@@ -17,15 +17,15 @@ function addProducts(quantity) {
   }
 }
 
-addProducts(5);
+addProducts(50);
 
 export default class BasicTable extends React.Component {
   render() {
     return (
-      <BootstrapTable data={ products }>
-          <TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
-          <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
-          <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
+      <BootstrapTable data={ products } height='500px'>
+          <TableHeaderColumn dataField='id' isKey={ true } width='100px'>Product ID</TableHeaderColumn>
+          <TableHeaderColumn dataField='name' width='200px'>Product Name</TableHeaderColumn>
+          <TableHeaderColumn dataField='price' width='250px'>Product Price</TableHeaderColumn>
       </BootstrapTable>
     );
   }
diff --git a/src/BootstrapTable.js b/src/BootstrapTable.js
index 47e060e58..9a8c92a89 100644
--- a/src/BootstrapTable.js
+++ b/src/BootstrapTable.js
@@ -1311,39 +1311,7 @@ class BootstrapTable extends Component {
     const isScroll = tbody.parentNode.getBoundingClientRect().height >
       tbody.parentNode.parentNode.getBoundingClientRect().height;
 
-    const scrollBarWidth = isScroll ? Util.getScrollBarWidth() : 0;
-    if (firstRow && this.store.getDataNum()) {
-      if (isScroll || this.isVerticalScroll !== isScroll) {
-        const cells = firstRow.childNodes;
-        for (let i = 0; i < cells.length; i++) {
-          const cell = cells[i];
-          const computedStyle = window.getComputedStyle(cell);
-          let width = parseFloat(computedStyle.width.replace('px', ''));
-          if (this.isIE) {
-            const paddingLeftWidth = parseFloat(computedStyle.paddingLeft.replace('px', ''));
-            const paddingRightWidth = parseFloat(computedStyle.paddingRight.replace('px', ''));
-            const borderRightWidth = parseFloat(computedStyle.borderRightWidth.replace('px', ''));
-            const borderLeftWidth = parseFloat(computedStyle.borderLeftWidth.replace('px', ''));
-            width = width + paddingLeftWidth + paddingRightWidth + borderRightWidth + borderLeftWidth;
-          }
-          const lastPadding = (cells.length - 1 === i ? scrollBarWidth : 0);
-          if (width <= 0) {
-            width = 120;
-            cell.width = width + lastPadding + 'px';
-          }
-          const result = width + lastPadding + 'px';
-          header[i].style.width = result;
-          header[i].style.minWidth = result;
-          if (cells.length - 1 === i) {
-            bodyHeader[i].style.width = width + 'px';
-            bodyHeader[i].style.minWidth = width + 'px';
-          } else {
-            bodyHeader[i].style.width = result;
-            bodyHeader[i].style.minWidth = result;
-          }
-        }
-      }
-    } else {
+    if (!(firstRow && this.store.getDataNum())) {
       for (const i in bodyHeader) {
         if (bodyHeader.hasOwnProperty(i)) {
           const child = bodyHeader[i];

From fa36f97eedb5be49c1c269099edcf7a3906759b1 Mon Sep 17 00:00:00 2001
From: BigHead Fan <bbbbighead@gmail.com>
Date: Tue, 4 Jul 2017 21:11:32 +0800
Subject: [PATCH 2/2] add percentage width sample

---
 examples/js/basic/basic-table.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/examples/js/basic/basic-table.js b/examples/js/basic/basic-table.js
index f9f1a47ad..779ee1742 100644
--- a/examples/js/basic/basic-table.js
+++ b/examples/js/basic/basic-table.js
@@ -23,9 +23,9 @@ export default class BasicTable extends React.Component {
   render() {
     return (
       <BootstrapTable data={ products } height='500px'>
-          <TableHeaderColumn dataField='id' isKey={ true } width='100px'>Product ID</TableHeaderColumn>
-          <TableHeaderColumn dataField='name' width='200px'>Product Name</TableHeaderColumn>
-          <TableHeaderColumn dataField='price' width='250px'>Product Price</TableHeaderColumn>
+          <TableHeaderColumn dataField='id' isKey={ true } width='10%'>Product ID</TableHeaderColumn>
+          <TableHeaderColumn dataField='name' width='65%'>Product Name</TableHeaderColumn>
+          <TableHeaderColumn dataField='price' width='25%'>Product Price</TableHeaderColumn>
       </BootstrapTable>
     );
   }