Fixing column widths in tables.

chrome/browser/resources/shared/js/cr/ui/table/table_header.js

 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @fileoverview This implements a table header.
  */
 
 cr.define('cr.ui.table', function() {
   /** @const */ var TableSplitter = cr.ui.TableSplitter;
@@ skipping 40 matching lines @@
     resize: function() {
       var cm = this.table_.columnModel;
 
       var headerCells = this.querySelectorAll('.table-header-cell');
       if (headerCells.length != cm.size) {
         this.redraw();
         return;
       }
 
       for (var i = 0; i < cm.size; i++) {
-        headerCells[i].style.width = cm.getWidth(i) + '%';
+        headerCells[i].style.width = cm.getWidth(i) + 'px';
       }
       this.placeSplitters_(this.querySelectorAll('.table-header-splitter'));
     },
 
     batchCount_: 0,
 
     startBatchUpdates: function() {
       this.batchCount_++;
     },
 
@@ skipping 15 matching lines @@
 
       this.updateWidth();
       this.headerInner_.textContent = '';
 
       if (!cm || ! dm) {
         return;
       }
 
       for (var i = 0; i < cm.size; i++) {
         var cell = this.ownerDocument.createElement('div');
-        cell.style.width = cm.getWidth(i) + '%';
+        cell.style.width = cm.getWidth(i) + 'px';
         cell.className = 'table-header-cell';
         if (dm.isSortable(cm.getId(i)))
           cell.addEventListener('click',
                                 this.createSortFunction_(i).bind(this));
 
         cell.appendChild(this.createHeaderLabel_(i));
         this.headerInner_.appendChild(cell);
       }
       this.appendSplitters_();
     },
 
     /**
      * Appends column splitters to the table header.
      */
     appendSplitters_: function() {
       var cm = this.table_.columnModel;
       var splitters = [];
-      for (var i = 0; i < cm.size - 1; i++) {
+      for (var i = 0; i < cm.size; i++) {
         // splitter should use CSS for background image.
         var splitter = new TableSplitter({table: this.table_});
         splitter.columnIndex = i;
         splitter.addEventListener('dblclick',
                               this.handleDblClick_.bind(this, i));
 
         this.headerInner_.appendChild(splitter);
         splitters.push(splitter);
       }
       this.placeSplitters_(splitters);
     },
 
     /**
      * Place splitters to right positions.
      * @param {Array.<HTMLElement>|NodeList} splitters Array of splitters.
      */
     placeSplitters_: function(splitters) {
-      var rtl = this.ownerDocument.defaultView.getComputedStyle(this).
-          direction == 'rtl';
       var cm = this.table_.columnModel;
-      var leftPercent = 0;
-      for (var i = 0; i < cm.size - 1; i++) {
-        leftPercent += cm.getWidth(i);
-        splitters[i].style.left = rtl ? 100 - leftPercent + '%' :
-                                        leftPercent + '%';
+      var place = 0;
+      for (var i = 0; i < cm.size; i++) {
+        place += cm.getWidth(i);
+        splitters[i].style.webkitMarginStart = place + 'px';
       }
     },
 
     /**
      * Renders column header. Appends text label and sort arrow if needed.
      * @param {number} index Column index.
      */
     createHeaderLabel_: function(index) {
       var cm = this.table_.columnModel;
       var dm = this.table_.dataModel;
@@ skipping 80 matching lines @@
   /**
    * Rectangular area around the splitters sensitive to touch events
    * (in pixels).
    */
   TableHeader.TOUCH_DRAG_AREA_WIDTH = 30;
 
   return {
     TableHeader: TableHeader
   };
 });