为什么这张桌子的最后一栏太宽了？

时间：2014-05-20 08:38:47

标签： javascript jquery html css handsontable

我有一个数据集，我可以用handontable库作为表格替换。问题是，我的表的最后一栏太宽了，尽管我没有做出任何规范。下面你可以看到我的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);

    });

3 个答案:

答案 0 :(得分：2)

为您的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

答案 1 :(得分：1)

为表格添加宽度

#myTable table {width：100％; }

答案 2 :(得分：0)

调整元素宽度时需要使用百分比

相关问题
最新问题