Table scroll with HTML and CSS [duplicate]

前端未结

关注

 9  1558

悲&欢浪女

相关标签:

9条回答

终归单人心

2020-11-28 03:48

Table with Fixed Header

<table cellspacing="0" cellpadding="0" border="0" width="325">
  <tr>
    <td>
       <table cellspacing="0" cellpadding="1" border="1" width="300" >
         <tr style="color:white;background-color:grey">
            <th>Header 1</th>
            <th>Header 2</th>
         </tr>
       </table>
    </td>
  </tr>
  <tr>
    <td>
       <div style="width:320px; height:80px; overflow:auto;">
         <table cellspacing="0" cellpadding="1" border="1" width="300" >
           <tr>
             <td>new item</td>
             <td>new item</td>
           </tr>
           <tr>
             <td>new item</td>
             <td>new item</td>
           </tr>
              <tr>
             <td>new item</td>
             <td>new item</td>
           </tr>
              <tr>
             <td>new item</td>
             <td>new item</td>
           </tr>
              <tr>
             <td>new item</td>
             <td>new item</td>
           </tr>
              <tr>
             <td>new item</td>
             <td>new item</td>
           </tr>
              <tr>
             <td>new item</td>
             <td>new item</td>
           </tr>
              <tr>
             <td>new item</td>
             <td>new item</td>
           </tr>
              <tr>
             <td>new item</td>
             <td>new item</td>
           </tr>
              <tr>
             <td>new item</td>
             <td>new item</td>
           </tr>
         </table>  
       </div>
    </td>
  </tr>
</table>

Result

Demo Image

This is working in all browser

Demo jsfiddle http://jsfiddle.net/nyCKE/6302/

0 讨论(0)

名媛妹妹

2020-11-28 03:51

  .outer {
    overflow-y: auto;
    height: 300px;
  }

  .outer {
    width: 100%;
    -layout: fixed;
  }

  .outer th {
    text-align: left;
    top: 0;
    position: sticky;
    background-color: white;
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>MYCRUD</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>

<div class="container-fluid col-md-11">
  <div class="row">

    <div class="col-lg-12">

   
        <div class="card-body">
          <div class="outer">

            <table class="table table-hover bg-light">
              <thead>
                <tr>
                  <th scope="col">ID</th>
                  <th scope="col">Marca</th>
                  <th scope="col">Editar</th>
                  <th scope="col">Eliminar</th>
                </tr>
              </thead>
              <tbody>

                
                  <tr>
                    <td>4</td>
                    <td>Toyota</td>
                    <td> <a class="btn btn-success" href="#">
                        <i class="fa fa-edit"></i>
                      </a>
                    </td>
                    <td> <a class="btn btn-danger" href="#">
                        <i class="fa fa-trash"></i>
                      </a>
                    </td>
                  </tr>

                                  <tr>
                    <td>3</td>
                    <td>Honda </td>
                    <td> <a class="btn btn-success" href="#">
                        <i class="fa fa-edit"></i>
                      </a>
                    </td>
                    <td> <a class="btn btn-danger" href="#">
                        <i class="fa fa-trash"></i>
                      </a>
                    </td>
                  </tr>

                                  <tr>
                    <td>5</td>
                    <td>Myo</td>
                    <td> <a class="btn btn-success" href="#">
                        <i class="fa fa-edit"></i>
                      </a>
                    </td>
                    <td> <a class="btn btn-danger" href="#">
                        <i class="fa fa-trash"></i>
                      </a>
                    </td>
                  </tr>

                                  <tr>
                    <td>6</td>
                    <td>Acer</td>
                    <td> <a class="btn btn-success" href="#">
                        <i class="fa fa-edit"></i>
                      </a>
                    </td>
                    <td> <a class="btn btn-danger" href="#">
                        <i class="fa fa-trash"></i>
                      </a>
                    </td>
                  </tr>

                                  <tr>
                    <td>7</td>
                    <td>HP</td>
                    <td> <a class="btn btn-success" href="#">
                        <i class="fa fa-edit"></i>
                      </a>
                    </td>
                    <td> <a class="btn btn-danger" href="#">
                        <i class="fa fa-trash"></i>
                      </a>
                    </td>
                  </tr>

                                  <tr>
                    <td>8</td>
                    <td>DELL</td>
                    <td> <a class="btn btn-success" href="#">
                        <i class="fa fa-edit"></i>
                      </a>
                    </td>
                    <td> <a class="btn btn-danger" href="#">
                        <i class="fa fa-trash"></i>
                      </a>
                    </td>
                  </tr>

                                  <tr>
                    <td>9</td>
                    <td>LOGITECH</td>
                    <td> <a class="btn btn-success" href="#">
                        <i class="fa fa-edit"></i>
                      </a>
                    </td>
                    <td> <a class="btn btn-danger" href="#">
                        <i class="fa fa-trash"></i>
                      </a>
                    </td>
                  </tr>

                              </tbody>
            </table>
          </div>

        </div>

     




    </div>

  </div>

</div>

</body>
</html>

0 讨论(0)

深忆病人

2020-11-28 03:53

Late answer, another idea, but very short.

put the contents of header cells into div
fix the header contents, see CSS

table  { margin-top:  20px; display: inline-block; overflow: auto; }
th div { margin-top: -20px; position: absolute; }

Note that it is possible to display table as inline-block due to anonymous table objects:

"missing" [in HTML table tree structure] elements must be assumed in order for the table model to work. Any table element will automatically generate necessary anonymous table objects around itself.

/* scrolltable rules */
table  { margin-top:  20px; display: inline-block; overflow: auto; }
th div { margin-top: -20px; position: absolute; }

/* design */
table { border-collapse: collapse; }
tr:nth-child(even) { background: #EEE; }

<table style="height: 150px">
  <tr> <th><div>first</div> <th><div>second</div>
  <tr> <td>foo <td>bar
  <tr> <td>foo foo foo foo foo <td>bar
  <tr> <td>foo <td>bar
  <tr> <td>foo <td>bar bar bar
  <tr> <td>foo <td>bar
  <tr> <td>foo <td>bar
  <tr> <td>foo <td>bar
  <tr> <td>foo <td>bar
  <tr> <td>foo <td>bar
  <tr> <td>foo <td>bar
  <tr> <td>foo <td>bar
  <tr> <td>foo <td>bar
  <tr> <td>foo <td>bar
  <tr> <td>foo <td>bar
</table>

0 讨论(0)

情书的邮戳

2020-11-28 03:59

Adds a fading gradient to an overflowing HTML table element to better indicate there is more content to be scrolled.

Table with fixed header
Overflow scroll gradient
Custom scrollbar

See the live example below:

$("#scrolltable").html("<table id='cell'><tbody></tbody></table>");
$("#cell").append("<thead><tr><th><div>First col</div></th><th><div>Second col</div></th></tr></thead>");

for (var i = 0; i < 40; i++) {
  $("#scrolltable > table > tbody").append("<tr><td>" + "foo" + "</td><td>" + "bar" + "</td></tr>");
}

/* Table with fixed header */

table,
thead {
  width: 100%;
  text-align: left;
}

#scrolltable {
  margin-top: 50px;
  height: 120px;
  overflow: auto;
  width: 200px;
}

#scrolltable table {
  border-collapse: collapse;
}

#scrolltable tr:nth-child(even) {
  background: #EEE;
}

#scrolltable th div {
  position: absolute;
  margin-top: -30px;
}


/* Custom scrollbar */

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}


/* Overflow scroll gradient */

.overflow-scroll-gradient {
  position: relative;
}

.overflow-scroll-gradient::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 240px;
  height: 25px;
  background: linear-gradient( rgba(255, 255, 255, 0.001), white);
  pointer-events: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overflow-scroll-gradient">
  <div id="scrolltable">
  </div>
</div>

0 讨论(0)

攒了一身酷

2020-11-28 04:03

This work for me

Demo: jsfiddle

$(function() 
{
    Fixed_Header();
});

function Fixed_Header()
{
    $('.User_Table thead').css({'position': 'absolute'});
    $('.User_Table tbody tr:eq("2") td').each(function(index,e){
        $('.User_Table thead tr th:eq("'+index+'")').css({'width' : $(this).outerWidth() +"px" });
    });
    var Header_Height = $('.User_Table thead').outerHeight();
    $('.User_Table thead').css({'margin-top' : "-"+Header_Height+"px"});
    $('.User_Table').css({'margin-top' : Header_Height+"px"});
}

0 讨论(0)

无人及你

2020-11-28 04:05

For those wondering how to implement Garry's solution with more than one header this is it:

#wrapper {
  width: 235px;
}

table {
  border: 1px solid black;
  width: 100%;
}

th,
td {
  width: 100px;
  border: 1px solid black;
}

thead>tr {
  position: relative;
  display: block;
}

tbody {
  display: block;
  height: 80px;
  overflow: auto;
}

<div id="wrapper">
  <table>
    <thead>
      <tr>
        <th>column1</th>
        <th>column2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>row1</td>
        <td>row1</td>
      </tr>
      <tr>
        <td>row2</td>
        <td>row2</td>
      </tr>
      <tr>
        <td>row3</td>
        <td>row3</td>
      </tr>
      <tr>
        <td>row4</td>
        <td>row4</td>
      </tr>
    </tbody>
  </table>
</div>

0 讨论(0)

1 2 下一页

热议问题