javascript - 为什么这个表的最后一列太宽了？

我有一个数据集，我用 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>

根据 Volkan 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);

    });

最佳答案

为您的 CSS 添加列宽:

td {width: 150px;}

要使第一列加粗(并坚持使用)，您需要使用 cells 属性

$('#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

关于javascript - 为什么这个表的最后一列太宽了？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23754860/

javascript - 为什么这个表的最后一列太宽了？

上一篇：css - 有关于漂浮的指导吗？

下一篇：html - 移动设备上的图像背景(固定、居中)问题