爲什麼這張表的最後一列太寬？

我有一個數據集，我用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

爲什麼這張表的最後一列太寬？

回答

相關問題