table scrollbar'ının pozisyonunu ayarlayınca table'ın da öyle görünmesi

Başlatan Timur, 20 Mayıs 2014 - 10:41:52

« önceki - sonraki »

0 Üyeler ve 2 Ziyaretçi konuyu incelemekte.

Timur

Handsontable (http://handsontable.com/) kütüphanesiyle oluşturduğum html tablosunun başlangıçta scrollbar'ı ve görünümünün en sağa dayalı bir biçimde görünmesini istiyorum. Bunu nasıl yapabilirim? Aşağıda kodumu paylaşıyorum.


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