Synology-Forum.nl
Overige software => Web Station => Topic gestart door: a.m.j.janssen 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>
-
Zo op het eerste zicht zal je width ook moeten meegeven in de <td> elementen.
-
Beste StefaanD,
de width meegeven in td of th helpt helaas niet.
mvg
-
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
-
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)