How do I set a button at the end of a table?

Question

How do I set a button at the end of a table?

Navigation

#1 by (0 votes)

0

I have this example in plunker link

It is a table with data that at the end has a "Show more ..." button with which I give more data to the table. The problem is that this table is scrollable, what I try to do in some way is that this button is "fixed" so when scrolling horizontally the text "Show More ..." in the center of the button is always visible. Because if you have a lot of data and it is scrolled, it is lost. I do not know if I explain myself, that button Show more always has to be visible to the user even though I scrolled a lot.

If you can help me grateful! Greetings

javascript html css web

asked by Matias Llanos 06.11.2017 в 16:29

source

1 answer

Print PHP live and not wait for the whole while loop to end problem calling the variable session in codeigneter

score 0 · Answer 1

You could put the button in a position and update the position with javascript when you scroll:

$(function(){
  $('.panel').scroll(function(){
    $('.btnMas').css({ 'left': $(this).scrollLeft()});
  });
});

.btnMas{
  position: relative;
  margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <h1>Hello Plunker!</h1>
  
    <div class="panel col-mx-12" style="overflow:auto;width:400px;height:180px;">
      <div style="display:grid;">
     <div id="divTableMain" class="col-mx-12" >
      <div class="col-mx-12" style="width:100%" >
    <table border="1" style="">
      <thead>
        <tr>
          <th>col1</th>
          <th>col2</th>
          <th>col3</th>
          <th>col4</th>
          <th>col5</th>
           <th>col6</th>
          <th>col7</th>
          <th>col8</th>
          <th>col9</th>
          <th>col10</th>
              <th>col11</th>
          <th>col12</th>
          <th>col13</th>
          <th>col14</th>
          <th>col15</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
        </tr>
         <tr>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
        </tr>
         <tr>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
        </tr>
         <tr>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
        </tr>
         <tr>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
        </tr>
            <tr>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
        </tr>
            <tr>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
        </tr>
            <tr>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
          <td>blabla</td>
        </tr>
      </tbody>
    </table>
      <button class="btnMas" title="Cargar más datos">
                    Mostrar más...
                </button>
        </div>
        </div>
    </div>
    </div>