jQuery selectable and scrollable in table element

Question

I followed this jquery plugin to make scrollable the selectable element from default jQueryUI library.

The demo presents the list as ul html element, I would like to create a table which uses this feature. I need declare table width as 100% and td width 50%.

my code is:

<html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.js"></script>
    <script src="http://karolyi.github.io/ui-selectableScroll/javascripts/selectableScroll.js"></script>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css">
    <link rel="stylesheet" type="text/css" href="jquery-ui-ext.css">
    <style type="text/css"> 
        <style>
            .fixed_header{
                width: 100%;
                border-collapse: collapse;
            }
            .fixed_header tr{
                width: 100%;
            }
            .fixed_header td{
                width: 50%;
            }
            .fixed_header tbody{
              display:block;
              width: 100%;
              overflow: auto;
              height: 100px;
            }
            td.ui-selecting {
              border: 1px dotted red;
            }
            td.ui-selected {
              background: red;
            }
        </style>
        <script>
            $(document).ready(function () {
                $('.fixed_header').selectableScroll({
                  filter: 'td'
                });
              });
        </script>
    </head>
    <body>  
        <div style="width:100%;height:300px;background:black"></div>
        <table class="fixed_header">
          <tbody>
            <tr><td>row 1-0</td><td>row 1-1</td></tr>
            <tr><td>row 2-0</td><td>row 2-1</td></tr>
            <tr><td>row 3-0</td><td>row 3-1</td></tr>
            <tr><td>row 4-0</td><td>row 4-1</td></tr>
            <tr><td>row 5-0</td><td>row 5-1</td></tr>
            <tr><td>row 6-0</td><td>row 6-1</td></tr>
            <tr><td>row 7-0</td><td>row 7-1</td></tr>
          </tbody>
        </table>
    </body>
</html>

and there are a few problems. The most important is because the scrollable function does not work as expected (as demo example) - the body of table should be scrollable when user uses the selectable (currently is not). The second problem is about the witdh of my elements, it does not fill the 100% od window.

How is it possible to create the selectable and scrollable in table?

Miroslav Glamuzina · Accepted Answer · 2019-02-09T20:53:00.453

You can achieve your expected result by wrapping your table in a <div/>and setting the max height in there. You will also want to remove .fixed_header tbody{display:block;} to get those <td/>'s full width. Also, please see Max-Height in Html Table.

$(document).ready(function() {
  $('#pane').selectableScroll({
    filter: 'td'
  });
});

#pane{
    display: block;
    overflow-y: scroll;
    max-height:100px;
 }
 .fixed_header {
   width: 100%;
   border-collapse: collapse;
 }

 .fixed_header tr {
   width: 100%;
 }

 .fixed_header td {
   width: 50%;
 }

 .fixed_header tbody {
   /* display: block; */
   width: 100%;
   overflow: auto;
   height: 100px;
 }

 td.ui-selecting {
   border: 1px dotted red;
 }

 td.ui-selected {
   background: red;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.js"></script>
<script src="http://karolyi.github.io/ui-selectableScroll/javascripts/selectableScroll.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="jquery-ui-ext.css">
    
<html>
  <body>
    <!-- <div style="width:100%;height:300px;background:black"></div> -->
    <div id="pane">
      <table class="fixed_header">
        <tbody>
          <tr>
            <td>row 1-0</td>
            <td>row 1-1</td>
          </tr>
          <tr>
            <td>row 2-0</td>
            <td>row 2-1</td>
          </tr>
          <tr>
            <td>row 3-0</td>
            <td>row 3-1</td>
          </tr>
          <tr>
            <td>row 4-0</td>
            <td>row 4-1</td>
          </tr>
          <tr>
            <td>row 5-0</td>
            <td>row 5-1</td>
          </tr>
          <tr>
            <td>row 6-0</td>
            <td>row 6-1</td>
          </tr>
          <tr>
            <td>row 6-0</td>
            <td>row 6-1</td>
          </tr>
          <tr>
            <td>row 6-0</td>
            <td>row 6-1</td>
          </tr>
          <tr>
            <td>row 6-0</td>
            <td>row 6-1</td>
          </tr>
          <tr>
            <td>row 7-0</td>
            <td>row 7-1</td>
          </tr>
        </tbody>
      </table>
    </div>

  </body>

</html>

Update: You may also find it usefull to look a little bit closer at colspans and rowspans. It appears that you are unintentionally setting the width of the <td/> elements.

unfortunately your code does not work for me (the selectable scrollbar doesnt work) — karl person, Feb 09 '19 at 20:29
@karlperson is it your intention for the table only to be scrollable only when an `` has been selected? — Miroslav Glamuzina, Feb 09 '19 at 20:37
no, table has a fix height so should be scrollable when noitems are selected and when items are selecting - when user select item and take cursor on the bottom of the table the scroll should work automatically (check the demo from my question, thats exactly what I want - just for table instead of list) — karl person, Feb 09 '19 at 20:43

jQuery selectable and scrollable in table element

1 Answers1