i have a problem with my dynamically genareted table. Im trying to fix this for a long time.. :D I finally decided to ask some people.
Just sayn that this is my first WebApp and i normally dont use html/css/js.
The table is wraped in a div, which defines the size of it. Also the table is reponsive (theres a bootstrap css behind) that means that theres no fixed col-width.
The problem is that if the table is too big and if i scroll down, you wont see the header anymore. Result: The user gets confused and dosnt know which data is in which row.
My Table:
div id="tblDiv" class="wrapper1">
<div class="div1">
<table style="border-bottom: 1px solid #cdd0d4;"class="table table-striped table-sm" id="tblContent">
</table>
</div>
</div>
My custom CSS:
.div1
{
width:100%;
height:100%;
overflow-x: auto;
overflow-y:auto;
}
.wrapper1
{
/* overflow-x: hidden;
overflow-y:hidden;*/
width:100%;
height:81%;
}
The Php Script which generates my table:
$anfrage = "SELECT TOP (".$MaxRecords.") * FROM Words WHERE (";
for($i = 0; $i < count($rowsCsv); $i++)
{
if($i == 0)
{
$anfrage = $anfrage . $rowsCsv[$i] . " like N".$_POST['searchStg']. " ";
}
else
{
$anfrage = $anfrage . "or " . $rowsCsv[$i] . " like N".$_POST['searchStg']. " ";
}
}
$anfrage = $anfrage . ")AND FirmenID = '".$_POST['CP']."'";
$rs = odbc_exec($db, $anfrage);
echo "<thead id='tblHeader' style='font-size:14pt' id='tblHeader'><tr>";
for($i = 0; $i < count($rowsCsv); $i++)
{
if($i == 0)
{
echo "<td style='border-right: 1px solid #cdd0d4;text-align: center'colspan='3'>Actions</td>";
}
echo "<td style='cursor:pointer' onclick='sortTable(".($i+3).");switchTH(".($i+1).")'><nobr>" . $rowsCsv[$i] . "</nobr></td>";
}
echo "</tr></thead><tbody>";
while (odbc_fetch_row($rs))
{
echo "<tr>";
$guid = '"' . odbc_result($rs,"Guid0") . '"';
for($i = 0; $i < count($rowsCsv); $i++)
{
$col = odbc_result($rs,trim($rowsCsv[$i]));
if($i == 0)
{
echo "<td style='text-align: center'><button onclick='EditID(".$guid.")' class='toolBtn'><img src='bilder/edit.png'></img></button><br><button style='color:red' onclick='deleteRow(".$guid.")' class='toolBtn'>-</button></td><td style='ext-align: center'><button onclick='copyID(".$guid.")' class='toolBtn'><img src='bilder/copy.png'></img></button></td><td style='border-right: 1px solid #cdd0d4;text-align: center'><button onclick='setChecked(".$guid.",)' class='toolBtn'><img src='bilder/check.png'></img></button></td>";
}
if(trim($rowsCsv[$i]) == "lastCheck")
{
$timestamp = strtotime("-1 months");
$stichtag = date("Y-m-d", $timestamp);
if($col == "1999-12-24")
{
echo "<td style='background-color:rgb(255,255,0,0.2)'>unchecked</td>";
}
else
{
if($col >= $stichtag)
echo "<td style='background-color:rgb(0,255,0,0.2)'>" . $col . "</td>";
if($col < $stichtag)
echo "<td style='background-color:rgb(255,0,0,0.2)'>old / " . $col . "</td>";
}
}
else
{
echo "<td>" . $col . "</td>";
}
}
echo "</tr>";
}
echo "</tbody>";
A example result:
<div id="tblDiv" class="wrapper1">
<div class="div1">
<table style="border-bottom: 1px solid #cdd0d4;" class="table table-striped table-sm" id="tblContent">
<thead id="tblHeader" style="font-size:14pt">
<tr>
<td style="border-right: 1px solid #cdd0d4;text-align: center" colspan="3">Actions</td>
<td style="cursor:pointer" onclick="sortTable(3);switchTH(1)">
<nobr>lastCheck</nobr>
</td>
<td style="cursor:pointer" onclick="sortTable(4);switchTH(2)">
<nobr>JA_Word</nobr>
</td>
<td style="cursor:pointer" onclick="sortTable(5);switchTH(3)">
<nobr> EN_Word</nobr>
</td>
<td style="cursor:pointer" onclick="sortTable(6);switchTH(4)">
<nobr> DE_Word</nobr>
</td>
<td style="cursor:pointer" onclick="sortTable(7);switchTH(5)">
<nobr> FR_Word</nobr>
</td>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center">
<button onclick="EditID("61CA196B-8A4A-1AD5-7A2B-4F24DCAE1F0D")" class="toolBtn">
<img src="bilder/edit.png">
</button>
<br>
<button style="color:red" onclick="deleteRow("61CA196B-8A4A-1AD5-7A2B-4F24DCAE1F0D")" class="toolBtn">-</button>
</td>
<td style="ext-align: center">
<button onclick="copyID("61CA196B-8A4A-1AD5-7A2B-4F24DCAE1F0D")" class="toolBtn">
<img src="bilder/copy.png">
</button>
</td>
<td style="border-right: 1px solid #cdd0d4;text-align: center">
<button onclick="setChecked("61CA196B-8A4A-1AD5-7A2B-4F24DCAE1F0D",)" class="toolBtn">
<img src="bilder/check.png">
</button>
</td>
<td style="background-color:rgb(255,255,0,0.2)">unchecked</td>
<td>2：円筒</td>
<td>2: CYLINDER</td>
<td>2: ZYLINDER</td>
<td>2: VERIN</td>
</tr>
<tr>
<td style="text-align: center">
<button onclick="EditID("58108919-DDD0-2660-E832-F857C3DC5BA4")" class="toolBtn">
<img src="bilder/edit.png">
</button>
<br>
<button style="color:red" onclick="deleteRow("58108919-DDD0-2660-E832-F857C3DC5BA4")" class="toolBtn">-</button>
</td>
<td style="ext-align: center">
<button onclick="copyID("58108919-DDD0-2660-E832-F857C3DC5BA4")" class="toolBtn">
<img src="bilder/copy.png">
</button>
</td>
<td style="border-right: 1px solid #cdd0d4;text-align: center">
<button onclick="setChecked("58108919-DDD0-2660-E832-F857C3DC5BA4",)" class="toolBtn">
<img src="bilder/check.png">
</button>
</td>
<td style="background-color:rgb(0,255,0,0.2)">2019-02-20</td>
<td>2：円筒</td>
<td>2: CYLINDER</td>
<td>2: ZYLINDER</td>
<td>2: VERIN</td>
</tr>
<tr>
<td style="text-align: center">
<button onclick="EditID("244F012B-9293-4036-D6C2-C76130AE9552")" class="toolBtn">
<img src="bilder/edit.png">
</button>
<br>
<button style="color:red" onclick="deleteRow("244F012B-9293-4036-D6C2-C76130AE9552")" class="toolBtn">-</button>
</td>
<td style="ext-align: center">
<button onclick="copyID("244F012B-9293-4036-D6C2-C76130AE9552")" class="toolBtn">
<img src="bilder/copy.png">
</button>
</td>
<td style="border-right: 1px solid #cdd0d4;text-align: center">
<button onclick="setChecked("244F012B-9293-4036-D6C2-C76130AE9552",)" class="toolBtn">
<img src="bilder/check.png">
</button>
</td>
<td style="background-color:rgb(255,255,0,0.2)">unchecked</td>
<td>自動ドアエアシリンダ（1M）</td>
<td>AIR CYLINDER FOR AUTO DOOR (1M)</td>
<td>LUFTZYLINDER FÜR AUTOMATIKTÜR (1M)</td>
<td>#NAME?</td>
</tr>
<tr>
<td style="text-align: center">
<button onclick="EditID("8BC84066-75B9-5DF8-68A7-AB02ADEABD09")" class="toolBtn">
<img src="bilder/edit.png">
</button>
<br>
<button style="color:red" onclick="deleteRow("8BC84066-75B9-5DF8-68A7-AB02ADEABD09")" class="toolBtn">-</button>
</td>
<td style="ext-align: center">
<button onclick="copyID("8BC84066-75B9-5DF8-68A7-AB02ADEABD09")" class="toolBtn">
<img src="bilder/copy.png">
</button>
</td>
<td style="border-right: 1px solid #cdd0d4;text-align: center">
<button onclick="setChecked("8BC84066-75B9-5DF8-68A7-AB02ADEABD09",)" class="toolBtn">
<img src="bilder/check.png">
</button>
</td>
<td style="background-color:rgb(0,255,0,0.2)">2019-02-20</td>
<td>エアシリンダ</td>
<td>AIR CYLINDER</td>
<td>LUFTZYLINDER</td>
<td>VERIN PNEUMATIQUE</td>
</tr>
<tr>
<td style="text-align: center">
<button onclick="EditID("2C08FF64-5A97-564B-55C3-A54F03C93809")" class="toolBtn">
<img src="bilder/edit.png">
</button>
<br>
<button style="color:red" onclick="deleteRow("2C08FF64-5A97-564B-55C3-A54F03C93809")" class="toolBtn">-</button>
</td>
<td style="ext-align: center">
<button onclick="copyID("2C08FF64-5A97-564B-55C3-A54F03C93809")" class="toolBtn">
<img src="bilder/copy.png">
</button>
</td>
<td style="border-right: 1px solid #cdd0d4;text-align: center">
<button onclick="setChecked("2C08FF64-5A97-564B-55C3-A54F03C93809",)" class="toolBtn">
<img src="bilder/check.png">
</button>
</td>
<td style="background-color:rgb(255,255,0,0.2)">unchecked</td>
<td>振動シリンダ</td>
<td>OSCILLATING CYLINDER</td>
<td>SCHWENKZYLINDER</td>
<td>VERIN OSCILLANT</td>
</tr>
</tbody>
</table>
</div>
</div>
Idk why it is formatted wrong but u can open it with ure browser to get a better overview!
Hope u can help me.
