You must Sign In to post a response.
  • Category: ASP.NET

    How to fixed left column of HTML table while scrolling horizontally.

    Hi,

    Suppose I have HTML table and while scrolling horizontally I want freeze the first column of table . I tried it by taking two <div> but when the content from first column increases it increase the height of that cell and then the cell corresponded to that freeze cell get tilted.

    Thank you in advance for your kind help.
  • #763662
    you should make the first column in a div and then create a class for that div with fixed property.

  • #763670
    Hai Gorakh Jadhav,
    I think you can make the first column in the div and then you can apply the style to make the text hidden with ... when the text is getting increased.
    You can use something like:

    text-overflow: ellipsis;
    word-wrap: break-word;
    overflow: hidden;

    Hope it will be helpful to you.

    Regards,
    Pawan Awasthi(DNS MVM)
    +91 8123489140 (whatsApp), +60 14365 1476(Malaysia)
    pawansoftit@gmail.com

  • #763860
    Use gridviewscroll with jquery.
    Download it from here : http://gridviewscroll.aspcity.idv.tw/
    Use As Bellow:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="../Scripts/gridviewScroll.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    gridviewScroll();
    });

    function gridviewScroll() {
    $('#gvMain').gridviewScroll({
    width: 700,
    height: 330,
    freezesize: 2,
    arrowsize: 30,
    varrowtopimg: "Images/arrowvt.png",
    varrowbottomimg: "Images/arrowvb.png",
    harrowleftimg: "Images/arrowhl.png",
    harrowrightimg: "Images/arrowhr.png",
    headerrowcount: 2
    });
    }
    </script>
    <table cellspacing="0" id="gvMain" style="width: 100%; border-collapse: collapse;">
    <tr class="GridviewScrollC1Header">
    <td colspan="3" style="background-color:#666666;">Product</td>
    <td colspan="2" style="background-color:#666666;">Package</td>
    <th rowspan="2" scope="col">StandardCost</th>
    <th rowspan="2" scope="col">ListPrice</th>
    <th rowspan="2" scope="col">SafetyStockLevel</th>
    <th rowspan="2" scope="col">SellStartDate</th>
    </tr>
    <tr class="GridviewScrollC1Header">
    <th scope="col">ProductID</th>
    <th scope="col">Name</th>
    <th scope="col">Number</th>
    <th scope="col">ReorderPoint</th>
    <th scope="col">Weight</th>
    </tr>
    <tr class="GridviewScrollC1Item">
    <td style="background-color: #DDDDDD;">747</td>
    <td style="background-color: #DDDDDD;">HL Mountain Frame - Black, 38</td>
    <td>FR-M94B-38</td>
    <td>500</td>
    <td>375</td>
    <td>739.0410</td>
    <td>1349.6000</td>
    <td>2.68</td>
    <td>7/1/2005 12:00:00 AM</td>
    </tr>
    <tr class="GridviewScrollC1Item">
    <td style="background-color: #DDDDDD;">748</td>
    <td style="background-color: #DDDDDD;">HL Mountain Frame - Silver, 38</td>
    <td>FR-M94S-38</td>
    <td>500</td>
    <td>375</td>
    <td>747.2002</td>
    <td>1364.5000</td>
    <td>2.68</td>
    <td>7/1/2005 12:00:00 AM</td>
    </tr>
    <tr class="GridviewScrollC1Item">
    <td style="background-color: #DDDDDD;">749</td>
    <td style="background-color: #DDDDDD;">Road-150 Red, 62</td>
    <td>BK-R93R-62</td>
    <td>100</td>
    <td>75</td>
    <td>2171.2942</td>
    <td>3578.2700</td>
    <td>15.00</td>
    <td>7/1/2005 12:00:00 AM</td>
    </tr>
    <tr class="GridviewScrollC1Item">
    <td style="background-color: #DDDDDD;">750</td>
    <td style="background-color: #DDDDDD;">Road-150 Red, 44</td>
    <td>BK-R93R-44</td>
    <td>100</td>
    <td>75</td>
    <td>2171.2942</td>
    <td>3578.2700</td>
    <td>13.77</td>
    <td>7/1/2005 12:00:00 AM</td>
    </tr>
    <tr class="GridviewScrollC1Item">
    <td style="background-color: #DDDDDD;">751</td>
    <td style="background-color: #DDDDDD;">Road-150 Red, 48</td>
    <td>BK-R93R-48</td>
    <td>100</td>
    <td>75</td>
    <td>2171.2942</td>
    <td>3578.2700</td>
    <td>14.13</td>
    <td>7/1/2005 12:00:00 AM</td>
    </tr>
    <tr class="GridviewScrollC1Item">
    <td style="background-color: #DDDDDD;">752</td>
    <td style="background-color: #DDDDDD;">Road-150 Red, 52</td>
    <td>BK-R93R-52</td>
    <td>100</td>
    <td>75</td>
    <td>2171.2942</td>
    <td>3578.2700</td>
    <td>14.42</td>
    <td>7/1/2005 12:00:00 AM</td>
    </tr>
    <tr class="GridviewScrollC1Item">
    <td style="background-color: #DDDDDD;">753</td>
    <td style="background-color: #DDDDDD;">Road-150 Red, 56</td>
    <td>BK-R93R-56</td>
    <td>100</td>
    <td>75</td>
    <td>2171.2942</td>
    <td>3578.2700</td>
    <td>14.68</td>
    <td>7/1/2005 12:00:00 AM</td>
    </tr>
    <tr class="GridviewScrollC1Item">
    <td style="background-color: #DDDDDD;">754</td>
    <td style="background-color: #DDDDDD;">Road-450 Red, 58</td>
    <td>BK-R68R-58</td>
    <td>100</td>
    <td>75</td>
    <td>884.7083</td>
    <td>1457.9900</td>
    <td>17.79</td>
    <td>7/1/2005 12:00:00 AM</td>
    </tr>
    <tr class="GridviewScrollC1Item">
    <td style="background-color: #DDDDDD;">755</td>
    <td style="background-color: #DDDDDD;">Road-450 Red, 60</td>
    <td>BK-R68R-60</td>
    <td>100</td>
    <td>75</td>
    <td>884.7083</td>
    <td>1457.9900</td>
    <td>17.90</td>
    <td>7/1/2005 12:00:00 AM</td>
    </tr>
    <tr class="GridviewScrollC1Item">
    <td style="background-color: #DDDDDD;">756</td>
    <td style="background-color: #DDDDDD;">Road-450 Red, 44</td>
    <td>BK-R68R-44</td>
    <td>100</td>
    <td>75</td>
    <td>884.7083</td>
    <td>1457.9900</td>
    <td>16.77</td>
    <td>7/1/2005 12:00:00 AM</td>
    </tr>
    <tr class="GridviewScrollC1Item">
    <td style="background-color: #DDDDDD;">757</td>
    <td style="background-color: #DDDDDD;">Road-450 Red, 48</td>
    <td>BK-R68R-48</td>
    <td>100</td>
    <td>75</td>
    <td>884.7083</td>
    <td>1457.9900</td>
    <td>17.13</td>
    <td>7/1/2005 12:00:00 AM</td>
    </tr>
    <tr class="GridviewScrollC1Item">
    <td style="background-color: #DDDDDD;">758</td>
    <td style="background-color: #DDDDDD;">Road-450 Red, 52</td>
    <td>BK-R68R-52</td>
    <td>100</td>
    <td>75</td>
    <td>884.7083</td>
    <td>1457.9900</td>
    <td>17.42</td>
    <td>7/1/2005 12:00:00 AM</td>
    </tr>
    <tr class="GridviewScrollC1Item">
    <td style="background-color: #DDDDDD;">759</td>
    <td style="background-color: #DDDDDD;">Road-650 Red, 58</td>
    <td>BK-R50R-58</td>
    <td>100</td>
    <td>75</td>
    <td>486.7066</td>
    <td>782.9900</td>
    <td>19.79</td>
    <td>7/1/2005 12:00:00 AM</td>
    </tr>
    <tr class="GridviewScrollC1Item">
    <td style="background-color: #DDDDDD;">760</td>
    <td style="background-color: #DDDDDD;">Road-650 Red, 60</td>
    <td>BK-R50R-60</td>
    <td>100</td>
    <td>75</td>
    <td>486.7066</td>
    <td>782.9900</td>
    <td>19.90</td>
    <td>7/1/2005 12:00:00 AM</td>
    </tr>
    <tr class="GridviewScrollC1Item">
    <td style="background-color: #DDDDDD;">761</td>
    <td style="background-color: #DDDDDD;">Road-650 Red, 62</td>
    <td>BK-R50R-62</td>
    <td>100</td>
    <td>75</td>
    <td>486.7066</td>
    <td>782.9900</td>
    <td>20.00</td>
    <td>7/1/2005 12:00:00 AM</td>
    </tr>
    <tr class="GridviewScrollC1Item">
    <td style="background-color: #DDDDDD;">762</td>
    <td style="background-color: #DDDDDD;">Road-650 Red, 44</td>
    <td>BK-R50R-44</td>
    <td>100</td>
    <td>75</td>
    <td>486.7066</td>
    <td>782.9900</td>
    <td>18.77</td>
    <td>7/1/2005 12:00:00 AM</td>
    </tr>
    <tr class="GridviewScrollC1Item">
    <td style="background-color: #DDDDDD;">763</td>
    <td style="background-color: #DDDDDD;">Road-650 Red, 48</td>
    <td>BK-R50R-48</td>
    <td>100</td>
    <td>75</td>
    <td>486.7066</td>
    <td>782.9900</td>
    <td>19.13</td>
    <td>7/1/2005 12:00:00 AM</td>
    </tr>
    <tr class="GridviewScrollC1Item">
    <td style="background-color: #DDDDDD;">764</td>
    <td style="background-color: #DDDDDD;">Road-650 Red, 52</td>
    <td>BK-R50R-52</td>
    <td>100</td>
    <td>75</td>
    <td>486.7066</td>
    <td>782.9900</td>
    <td>19.42</td>
    <td>7/1/2005 12:00:00 AM</td>
    </tr>
    <tr class="GridviewScrollC1Item">
    <td style="background-color: #DDDDDD;">765</td>
    <td style="background-color: #DDDDDD;">Road-650 Black, 58</td>
    <td>BK-R50B-58</td>
    <td>100</td>
    <td>75</td>
    <td>486.7066</td>
    <td>782.9900</td>
    <td>19.79</td>
    <td>7/1/2005 12:00:00 AM</td>
    </tr>
    <tr class="GridviewScrollC1Item">
    <td style="background-color: #DDDDDD;">766</td>
    <td style="background-color: #DDDDDD;">Road-650 Black, 60</td>
    <td>BK-R50B-60</td>
    <td>100</td>
    <td>75</td>
    <td>486.7066</td>
    <td>782.9900</td>
    <td>19.90</td>
    <td>7/1/2005 12:00:00 AM</td>
    </tr>
    <tr class="GridviewScrollC1Item">
    <td style="background-color: #DDDDDD;">767</td>
    <td style="background-color: #DDDDDD;">Road-650 Black, 62</td>
    <td>BK-R50B-62</td>
    <td>100</td>
    <td>75</td>
    <td>486.7066</td>
    <td>782.9900</td>
    <td>20.00</td>
    <td>7/1/2005 12:00:00 AM</td>
    </tr>
    <tr class="GridviewScrollC1Item">
    <td style="background-color: #DDDDDD;">768</td>
    <td style="background-color: #DDDDDD;">Road-650 Black, 44</td>
    <td>BK-R50B-44</td>
    <td>100</td>
    <td>75</td>
    <td>486.7066</td>
    <td>782.9900</td>
    <td>18.77</td>
    <td>7/1/2005 12:00:00 AM</td>
    </tr>
    <tr class="GridviewScrollC1Item">
    <td style="background-color: #DDDDDD;">769</td>
    <td style="background-color: #DDDDDD;">Road-650 Black, 48</td>
    <td>BK-R50B-48</td>
    <td>100</td>
    <td>75</td>
    <td>486.7066</td>
    <td>782.9900</td>
    <td>19.13</td>
    <td>7/1/2005 12:00:00 AM</td>
    </tr>
    <tr class="GridviewScrollC1Item">
    <td style="background-color: #DDDDDD;">770</td>
    <td style="background-color: #DDDDDD;">Road-650 Black, 52</td>
    <td>BK-R50B-52</td>
    <td>100</td>
    <td>75</td>
    <td>486.7066</td>
    <td>782.9900</td>
    <td>19.42</td>
    <td>7/1/2005 12:00:00 AM</td>
    </tr>
    <tr class="GridviewScrollC1Item">
    <td style="background-color: #DDDDDD;">771</td>
    <td style="background-color: #DDDDDD;">Mountain-100 Silver, 38</td>
    <td>BK-M82S-38</td>
    <td>100</td>
    <td>75</td>
    <td>1912.1544</td>
    <td>3399.9900</td>
    <td>20.35</td>
    <td>7/1/2005 12:00:00 AM</td>
    </tr>
    <tr class="GridviewScrollC1Item">
    <td style="background-color: #DDDDDD;">772</td>
    <td style="background-color: #DDDDDD;">Mountain-100 Silver, 42</td>
    <td>BK-M82S-42</td>
    <td>100</td>
    <td>75</td>
    <td>1912.1544</td>
    <td>3399.9900</td>
    <td>20.77</td>
    <td>7/1/2005 12:00:00 AM</td>
    </tr>
    <tr class="GridviewScrollC1Item">
    <td style="background-color: #DDDDDD;">773</td>
    <td style="background-color: #DDDDDD;">Mountain-100 Silver, 44</td>
    <td>BK-M82S-44</td>
    <td>100</td>
    <td>75</td>
    <td>1912.1544</td>
    <td>3399.9900</td>
    <td>21.13</td>
    <td>7/1/2005 12:00:00 AM</td>
    </tr>
    <tr class="GridviewScrollC1Item">
    <td style="background-color: #DDDDDD;">774</td>
    <td style="background-color: #DDDDDD;">Mountain-100 Silver, 48</td>
    <td>BK-M82S-48</td>
    <td>100</td>
    <td>75</td>
    <td>1912.1544</td>
    <td>3399.9900</td>
    <td>21.42</td>
    <td>7/1/2005 12:00:00 AM</td>
    </tr>
    <tr class="GridviewScrollC1Item">
    <td style="background-color: #DDDDDD;">775</td>
    <td style="background-color: #DDDDDD;">Mountain-100 Black, 38</td>
    <td>BK-M82B-38</td>
    <td>100</td>
    <td>75</td>
    <td>1898.0944</td>
    <td>3374.9900</td>
    <td>20.35</td>
    <td>7/1/2005 12:00:00 AM</td>
    </tr>
    <tr class="GridviewScrollC1Item">
    <td style="background-color: #DDDDDD;">776</td>
    <td style="background-color: #DDDDDD;">Mountain-100 Black, 42</td>
    <td>BK-M82B-42</td>
    <td>100</td>
    <td>75</td>
    <td>1898.0944</td>
    <td>3374.9900</td>
    <td>20.77</td>
    <td>7/1/2005 12:00:00 AM</td>
    </tr>
    </table>

    If you are unable to do something properly for the first time, call it Version 1.0!

    Thanks & Regards,
    MONOJ BHUINA


Sign In to post your comments