Auteur Topic: Tabel met fixed header en scrollable contents.  (gelezen 368 keer)

Offline a.m.j.janssen

  • Bedankjes
  • -Gegeven: 7
  • -Ontvangen: 1
  • Berichten: 122
Tabel met fixed header en scrollable contents.
« Gepost op: 21 januari 2021, 12:01:54 »
Hallo,
Ik heb een tabel met een vaste header en verticaal scrollable resultaten (zie hieronder). De header is ok.
Alle 'cellen' van de tabel zijn echter even breed en ik krijg die niet aangepast met bijv <td> of <th>
Ze blijven even breed. Hoe kan ik de breedte beinvloeden, bijv mbv CSS?
De output komt uit een database, maar dat is vlgs mij niet zo belangrijk (?).
Bvd en mvg
========



<html>
<head>
  <title>Fixed Header - Scrollable Table</title>
  <style type="text/css">
  table#header th {border-right:solid 1px #000}
  table#header th#right-border {padding:0 4px 0 3px;border-right:none;}
  table#tbl-content td {border-bottom:solid 1px #bbb;border-right:solid 1px #bbb;}
  table#tbl-content tr#bottom td {border-bottom:none;}
  #box{
    width:100%;
    height:700px;
    overflow-y:auto;
    border:solid 1px #000;
    border-top:none;
  }
  #tbl-content{
    width:1450px;
    table-layout:fixed;
    background:#fff;
  }
  #header{
    width:1450px;
    text-align:left;
    table-layout:fixed;
  }
  </style>
</head>

<body>
<div id="wrapper">
<div id="content" style="width:99% #000;">
<div id="boundary" style="margin-right:-2px;background:lightblue;border:solid 1px #000;">

<table id="header" cellpadding="3" cellspacing="0" border="0">
   <tr>
      <th width="3%">Nr</th>
      <th width="3%">Wijzig</th>
      <th width="3%">Bekijk</th>
      <th width="3%">Verw</th>
      <th width="8%">Wie</th>
      <th width="8%">Wat</th>
      <th width="8%">Waar</th>
      <th width="8%">Waarom</th>
      <th width="5%">OpnDatum</th>
      <th width="10%">Opm OpnDatum</th>
      <th width="5%">ImpDatum</th>
      <th width="8%">Pad</th>
      <th width="8%">Beschr</th>       
   </tr>
</table>
</div>

<div id="box">
<table id="tbl-content" cellpadding="0" cellspacing="0" border="1">
   <tr>
   
   
   <?php   
       // Open de database.   
      include ('includes/database_connect.php');

      // Sorteren........
      $sql="SELECT * FROM TAB_FotosEnVideos ";
         $result = mysqli_query($dbcnx,$sql);
        if (!$result) { die('De volgende fout is opgetreden bij het lezen van tabel TAB_FotosEnVideos: ' . mysqli_error($dbcnx));};

      // Bepalen lopend aantal records uit Tab_Diversen
      
      $sql = "SELECT div_volgnr FROM TAB_Diversen";
      $ok=mysqli_query($dbcnx, $sql);
        if (!$ok)  { die('<br>De volgende fout is opgetreden bij het lezen uit tabel TAB_Diversen: ' . mysqli_error($dbcnx)); }       
      
      $row = mysqli_fetch_array($ok);
      $div_volgnr=$row['div_volgnr'];
      
      if ($div_volgnr!=0) {
            
         while ( $row = mysqli_fetch_array($result) ) {
            echo ('<tr>');
            
                echo ('<td>' . $row['nummer']   . '</td>');
                echo ('<td><a href=wijzigen.php?id=' . $row['id'] .  '>
               <center><img src="images/wijzig.png" border="0" alt="Wijzigen" title="Wijzigen" ></center></a></td>');                  
                     
               echo ('<td><a href=show.php?pad='. $row['pad'] . '>
               <center><img src=" ' . $row['pad'] .  ' " width="35" height="40" border="0" alt="Bekijken" title="Bekijken" ></center></a></td>');
            
               echo ('<td><a href=verwijderen.php?id=' . $row['id'] . '>
               <center><img src="images/no.gif" border="0" alt="Verwijderen" title="Verwijderen" ></center></a></td>');                  
                 
               
               echo ('<td>' .   $row['wie']      . '</td>');
               echo ('<td>'.   $row['wat']      . '</td>');
               echo ('<td>' .   $row['waar']   . '</td>');
               echo ('<td>' .   $row['waarom']   . '</td>');
               echo ('<td>' .   $row['opndatum']. '</td>');
               echo ('<td>' .   $row['opmopndat']. '</td>');               
               echo ('<td>' .   $row['impdatum']. '</td>');
               echo ('<td>' .   $row['pad']      . '</td>');
               echo ('<td>' .   $row['beschr']   . '</td>');
   
             echo ('</tr>');

         }
         
      
      } else {
            echo "<br><center><font color='red'>Er zijn geen bestanden in de database opgeslagen</font></center>";
      }
      
      
       ?>
     
     
</table>
</div>
</div>
</div>
</body>
</html>
  • Mijn Synology: DS414
  • HDD's: 4x WD20EZRX-22D8PB0

Offline StefaanD

  • MVP
  • *
  • Bedankjes
  • -Gegeven: 47
  • -Ontvangen: 92
  • Berichten: 329
Re: Tabel met fixed header en scrollable contents.
« Reactie #1 Gepost op: 21 januari 2021, 12:38:09 »
Zo op het eerste zicht zal je width ook moeten meegeven in de <td> elementen.
  • Mijn Synology: DS2413+
  • HDD's: 8 x 4TB
  • Extra's: 4 GB
DS2413+
8 x Seagate 4TB en vier lege bays
5-star contributor My Movies Pro

Offline a.m.j.janssen

  • Bedankjes
  • -Gegeven: 7
  • -Ontvangen: 1
  • Berichten: 122
Re: Tabel met fixed header en scrollable contents.
« Reactie #2 Gepost op: 21 januari 2021, 12:54:22 »
Beste StefaanD,
de width meegeven in td of th helpt helaas niet.
mvg
  • Mijn Synology: DS414
  • HDD's: 4x WD20EZRX-22D8PB0

Offline Wyodor

  • MVP
  • *
  • Bedankjes
  • -Gegeven: 1
  • -Ontvangen: 132
  • Berichten: 640
Re: Tabel met fixed header en scrollable contents.
« Reactie #3 Gepost op: 21 januari 2021, 15:22:07 »
De tabel met de width in de th heeft geen relatie met de tabel in de #box div.
Vandaar dat de breedte van de tabelcellen anders is.

Combineer de tabel als volgt :

<table>
<thead>
<tr><th></th><th></th></tr>
</thead>
<tbody>
<tr><td></td><td></td></tr>
</tbody>
</table>

Om de inhoud van de tabel te scrollen waarbij de kolomtekst vast blijf staan, bekijk deze uitleg :

https://stackoverflow.com/a/17380697
  • Mijn Synology: DS211
  • HDD's: 2 x ST33000650NS

Offline Plerry

  • MVP
  • *
  • Bedankjes
  • -Gegeven: 17
  • -Ontvangen: 262
  • Berichten: 1.393
Re: Tabel met fixed header en scrollable contents.
« Reactie #4 Gepost op: 21 januari 2021, 15:22:58 »
Je hebt een eerste tabel
<table id="header" ...
binnen het div element "boundary"
waarvoor je voor de diverse <th> elementen een width specificeert.
Maar vervolgens sluit je die tabel af met een </table> en het div element met </div>

Daarna open je een div element "box" en daarbinnen een andere/nieuwe tabel
<table id="tbl-content"  ...
waarin de <td> elementen zitten die je kennelijk een breedte wil meegeven.
Maar die "tbl-content" tabel is een andere tabel (zelfs binnen een ander div-element) dan die eerdere "header" tabel,
en deze "tbl-content" tabel weet niets van de colombreedtes van die eerdere "header" tabel.

Als de "header" tabel de koppen bevat voor de "tbl-content" tabel kan je er veel beter 1 tabel van maken in plaats van 2,
maar die moet dan uiteraard ook wel binnen hetzelfde div-element vallen.

(Ik zag dat mijn bericht dat van Wyodor kruiste. Essentie is hetzelfde)
There are only 10 kinds of people: ... those who understand binary, and those who don't.