Member Avatar for zella

hi can someone help me make my headers fixed and my table body be able to scroll vertically.

i have seen the javascript and css "display:block and overflow-y: auto; overflow-x: hidden;"

it just doesnt work with me .

<style>
    .table{
        width:100%; 
        border-collapse:collapse; 
        border:0px ;
        cellspacing:5px;
        cellpadding:5px;
        margin-left:auto;
        margin-right:auto;

        max-width:70%;

        border-color:#9DC45F;
    }
    .table tbody{
     border-color:#9DC45F;
      overflow-y: auto;
    overflow-x: hidden;
    }
    .table th{
      background-color: #9DC45F; 
      color: white;
      border:1px;
      cellspacing:2px;
      cellpadding:1px;
      width:5%;


    }
    .table td{ 
        padding:7px;
         border:#9DC45F 1px solid;
    }

    .table tr{
      background-color:#9DC45F;
      height:30px;
      border-color:#9DC45F;
    }

    .table tr:nth-child(odd){ 
       background-color:#999;
       height:30px;
        border-color:#9DC45F;

    }

    .table tr:nth-child(even){
        background:#CCC;
    }
</style>
<script>
var $table = $('table'),
    $bodyCells = $table.find('tbody').children(),
    colWidth;


$(window).resize(function() {
    // Get the tbody columns width array
    colWidth = $bodyCells.map(function() {
        return $(this).width();
    }).get();


    $table.find('thead').children().each(function(i, v) {
        $(v).width(colWidth[i]);
    });    
}).resize(); 
</script>
        <body>

        <table class="table">      

        <thead>

            <th>Date</th>
            <th>Ref</th>
            <th>Name</th>
            <th>Bbf</th>
            <th>Tel</th>
            <th>Email</th>
            <th>Product</th>


             </thead>

          <tbody >

          <?php
                    $sql = "Select * from table ";
                    $rs = mysqli_query($conn,$sql);

    while ($row = mysqli_fetch_assoc($rs)) {

        echo '<tr>';  
        echo '<td >'.$row['date'].'</td> '; 
        echo '<td >'.$row['ref'].'</td>'; 
        echo '<td >'.$row['name'].'</td>'; 
        echo '<td >'.$row['bbf'].'</td>'; 
        echo '<td >'.$row['tel'].'</td>'; 
        echo '<td >'.$row['email'].'</td>'; 
        echo '<td >'.$row['product'].'</td>'; 
        echo '</tr>';
    }

          ?>

           </tbody>    
          </table>


        </body>
Edited by Member #120589 because: Wrong forum
  • 2 Contributors
  • 1 Reply
  • 111 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by Member #120589

Dani AI

Generated

Notes for (and confirmation from that this is a CSS/HTML issue):

The simplest, most reliable modern solution is to keep the table as a normal table and put the vertical scroll on a wrapper, then make the header cells sticky. That avoids making tbody a block (which breaks automatic column sizing) and removes the need for width-sync JavaScript in most cases.

Example pattern (works in modern browsers):

<div class="table-wrap">
  <table class="table">
    <thead>
      <tr>
        <th>Date</th><th>Ref</th><th>Name</th><!-- etc -->
      </tr>
    </thead>
    <tbody>
      <!-- PHP rows here -->
    </tbody>
  </table>
</div>
.table-wrap {
  max-height: 320px;
  overflow-y: auto;
}

.table { width: 100%; border-collapse: collapse; table-layout: fixed; }

.table thead th {
  position: sticky;
  top: 0;
  background: #9DC45F;
  color: #fff;
  z-index: 2;
  padding: 7px;
}

.table td { padding: 7px; border: 1px solid #9DC45F; }

If older-IE support is required, use a header-only table stacked above a body-only, scrollable table and sync column widths with JS (measure the first body row: var $bodyCells = $table.find('tbody tr:first').children(); and apply those widths to thead th). That fixes the common bug in the original script, which measured the wrong elements.

Other fixes and gotchas seen in the snippet: the thead must contain a <tr> wrapper (missing in the posted HTML), cellspacing/cellpadding are not CSS properties (use border-spacing / padding), and border:1px is invalid — include style and color (border: 1px solid #9DC45F). position: sticky is widely supported in modern browsers (see MDN: position: sticky).

Member Avatar for Member #120589

I can't see why this is posted in the PHP forum. CSS? Moving...

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.