为什么这张表的最后一列太宽？

我有一个数据集，我用handsontable库作为表格进行替换。问题是，我的桌子的最后一列太宽了，尽管我没有为此做任何说明。下面你可以看到我的HTML - CSS - JavaScript。另外，当我滚动表，第一列停止加粗。为什么这张表的最后一列太宽？

这是它的外观： enter image description here 我该如何解决这些问题？

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
     <link rel="stylesheet" type="text/css" href="/css/result-light.css"> 
     <script src="http://warpech.github.io/jquery-handsontable/lib/jquery.min.js"></script> 
     <script src="http://warpech.github.io/jquery-handsontable/dist/jquery.handsontable.full.js"></script> 
     <link rel="stylesheet" media="screen" href="http://warpech.github.io/jquery-handsontable/dist/jquery.handsontable.full.css"> 
     <link rel="stylesheet" media="screen" href="http://warpech.github.io/jquery-handsontable/demo/css/samples.css?20140401"> 

     <style type="text/css"> 
      body {background: white; margin: 20px;} 
      h2 {margin: 20px 0;} 
      .zebraStyle > tbody > tr:nth-child(2n+1) > td {background: #e0e0d1;} 
      .firstRowStyle > tbody > tr:nth-child(1) > td {font-weight: Bold; text-align:center;} /* 
      .firstColumnStyle > tbody > tr:eq(1) {font-weight: Bold;} */ 
     </style> 

     <script type='text/javascript'> 
      var arr= [["", "2008", "2009", "2010", "2011", "2012", "2013", "2014(YTD)"], ["Ferrari", "23.799.245.586", "24.690.793.476", "25.637.877.928", "26.189.313.420", "26.759.521.361", "28.238.790.068", "7.363.270.000", "2.527.936.616"], ["Alfa Romeo", "948.840.165", "1.035.394.421", "1.207.130.829", "1.432.940.401", "1.460.089.088", "1.637.243.070", "425.353.290", "137.777.306"], ["Aston Martin", "1.224.273.741", "1.171.484.355", "1.182.773.083", "1.219.699.570", "1.199.141.138", "1.224.624.821", "284.496.087", "96.903.916"], ["Renault", "483.793.987", "466.042.354", "456.537.683", "452.938.678", "533.421.162", "760.272.188", "216.715.015", "75.310.147"], ["Mercedes Benz", "789.262.256", "772.821.174", "773.167.187", "843.102.608", "901.922.932", "888.354.063", "218.907.883", "73.654.116"], ["BMW", "1.015.470.711", "959.962.514", "950.339.914", "872.787.810", "808.073.299", "792.529.238", "193.279.429", "67.888.380"], ["Bugatti", "117.987.733", "150.848.338", "165.913.066", "229.880.712", "254.621.690", "314.049.044", "126.315.485", "65.706.666"], ["Volvo", "300.737.769", "366.089.550", "437.732.938", "496.374.653", "583.436.131", "688.728.665", "189.419.815", "62.063.316"], ["Lamborghini", "1.145.266.348", "1.190.619.961", "978.255.422", "739.009.730", "688.060.328", "707.948.227", "191.463.900", "60.533.498"], ["Maserati", "812.817.727", "880.551.309", "851.913.877", "634.843.167", "629.542.913", "590.023.385", "167.015.651", "59.506.729"], ["Audi", "701.284.022", "718.701.862", "700.197.497", "684.531.574", "677.868.130", "684.122.911", "173.536.385", "57.995.362"]]; 

      $(document).ready(function(){ 
       $('#myTable').handsontable({ 
        data: arr, 
        minSpareRows: 1, 
        contextMenu: true, 
        readOnly: true, 
        fixedColumnsLeft: 1 
       }); 
       $('#myTable').find('table').addClass('zebraStyle'); 
       $('#myTable').find('table').addClass('firstRowStyle'); 
       $('#myTable').find('td:first-child').css("font-weight", "bold"); 
       //$('.handle').css("left","200px"); // this line sets position of scroll bar 
       //$('#myTable').scrollLeft(200); 

      }); 
     </script> 
    </head> 
    <body> 
     <div id="myTable" class="handsontable" style="width: 750px; margin-left:auto; margin-right:auto; background-color:silver"></div> 
    </body> 
</html>

我更新从沃尔坎Ulukut的回答我的JavaScript后，这是我的javascript：

var arr= [["", "2008", "2009", "2010", "2011", "2012", "2013", "2014(YTD)"], ["Ferrari", "23.799.245.586", "24.690.793.476", "25.637.877.928", "26.189.313.420", "26.759.521.361", "28.238.790.068", "7.363.270.000", "2.527.936.616"], ["Alfa Romeo", "948.840.165", "1.035.394.421", "1.207.130.829", "1.432.940.401", "1.460.089.088", "1.637.243.070", "425.353.290", "137.777.306"], ["Aston Martin", "1.224.273.741", "1.171.484.355", "1.182.773.083", "1.219.699.570", "1.199.141.138", "1.224.624.821", "284.496.087", "96.903.916"], ["Renault", "483.793.987", "466.042.354", "456.537.683", "452.938.678", "533.421.162", "760.272.188", "216.715.015", "75.310.147"], ["Mercedes Benz", "789.262.256", "772.821.174", "773.167.187", "843.102.608", "901.922.932", "888.354.063", "218.907.883", "73.654.116"], ["BMW", "1.015.470.711", "959.962.514", "950.339.914", "872.787.810", "808.073.299", "792.529.238", "193.279.429", "67.888.380"], ["Bugatti", "117.987.733", "150.848.338", "165.913.066", "229.880.712", "254.621.690", "314.049.044", "126.315.485", "65.706.666"], ["Volvo", "300.737.769", "366.089.550", "437.732.938", "496.374.653", "583.436.131", "688.728.665", "189.419.815", "62.063.316"], ["Lamborghini", "1.145.266.348", "1.190.619.961", "978.255.422", "739.009.730", "688.060.328", "707.948.227", "191.463.900", "60.533.498"], ["Maserati", "812.817.727", "880.551.309", "851.913.877", "634.843.167", "629.542.913", "590.023.385", "167.015.651", "59.506.729"], ["Audi", "701.284.022", "718.701.862", "700.197.497", "684.531.574", "677.868.130", "684.122.911", "173.536.385", "57.995.362"]]; 
    function firstRowRenderer(instance, td, row, col, prop, value, cellProperties) { 
     Handsontable.renderers.TextRenderer.apply(this, arguments); 
     td.style.fontWeight = 'bold'; 
    } 


    $(document).ready(function(){ 
     $('#myTable').handsontable({ 
      data: arr, 
      minSpareRows: 1, 
      contextMenu: true, 
      readOnly: true, 
      fixedColumnsLeft: 1 
      cells: function (row, col, prop) { 
       var cellProperties = {}; 
       if (col === 0) { 
        cellProperties.renderer = firstRowRenderer; // uses function directly 
       } 
       return cellProperties; 
      } 
     }); 
     $('#myTable').find('table').addClass('zebraStyle'); 
     $('#myTable').find('table').addClass('firstRowStyle'); 
     $('#myTable').find('td:first-child').css("font-weight", "bold"); 
     //$('#myTable').find('td').css("width","50px"); 
     //$('.handle').css("left","200px"); // this line sets position of scroll bar 
     //$('#myTable').scrollLeft(200); 

    });

来源

2014-05-20 Timur Aykut YILDIRIM

的宽度时指定为表的宽度，它强制所有列的总和是750第一列伸展根据其内容，最后一个得到所有他自己的剩余宽度。 –

我怎样才能将剩余宽度分配给所有列？ –

你可以用'td {width：150px;}'指定每一列的宽度。 –

添加列的宽度，以你的CSS：

td {width: 150px;}

，使第一列大胆（并坚持下去）你需要使用单元格属性

$('#myTable').handsontable({ 
    data: arr, 
    minSpareRows: 1, 
    contextMenu: true, 
    readOnly: true, 
    fixedColumnsLeft: 1, 
    cells: function (row, col, prop) { 
     var cellProperties = {}; 
     if (col === 0) { 
      cellProperties.renderer = firstRowRenderer; //uses function directly 
     } 
     return cellProperties; 
     }   
});

和用于它的函数：

function firstRowRenderer(instance, td, row, col, prop, value, cellProperties) { 
    Handsontable.renderers.TextRenderer.apply(this, arguments); 
    td.style.fontWeight = 'bold'; 
}

jsfiddle

来源

2014-05-20 08:47:59

这完美地解决了我的问题。大胆的问题上的任何想法？ –

为大胆问题增加了解决方案。 –

尽管它适用于我从js小提琴中获取所有代码的情况。当我用你的代码更新我的文件时，它不工作。你可以看到我的最初版本的JavaScript的最新版本 –

附加宽度表

#myTable表{宽度：100％; }

来源

2014-05-20 08:58:15

你需要使用比例调整元件

来源

2014-05-20 09:04:53 Red

这并没有提供问题的答案。要批评或要求作者澄清，在他们的帖子下留下评论 - 你总是可以评论你自己的帖子，一旦你有足够的[声誉]（http://stackoverflow.com/help/whats-reputation），你会能够[评论任何帖子]（http://stackoverflow.com/help/privileges/comment）。 – Hatsjoem

我的目标不是REPUATION。我试图给出一个建议。这不是对这个建议这个问题的回答。因为你不能使用实际的数字，所以你必须使用百分比。如果你再读一遍我的回答，我写了“元素”表或其他。但必须与百分比一起使用。 – Red

为什么这张表的最后一列太宽？

回答

相关问题