1

I've been trying to edit this table(s) for a few days.

The plan is that the header is always at the top when scrolling. Because everything is configured code, I can not work with typical HTML / CSS. After a long time I have found this (almost) working solution.

That the code looks so ugly is because I got this structure inherited and I haven't had the time to worry about it yet.

The problem that still exists is when the DIV outside is smaller than the table needs, the table contracts. Although the columns actually have a given width. If the div is wide enough outside, then the table looks like it should.

What am I doing wrong? Maybe someone has an idea or solution ready.

This is how it should look (even if the div is smaller just with scrolling)

https://jsfiddle.net/mzue3j9t

Sample:

<div id="GRD1" style="overflow: auto hidden; display: block; position: absolute; top: 22px; left: 20px; width: 400px; height: 176px; font-family: Tahoma; font-size: 8pt; color: rgb(0, 0, 0); z-index: 1; background-color: threedface; visibility: visible; border: 1px solid rgb(127, 157, 185);">
    <table class="header" cellspacing="0" cellpadding="0" style="table-layout: fixed; background:threedface">
        <thead>
            <tr>
                <th style="white-space: nowrap; border-width: 1px 0px 1px 1px; border-style: solid; border-color: rgb(0, 0, 0); padding: 0px 2px; text-align: left; cursor: default; width: 17px; font-weight: normal;" title="undefined">&nbsp;</th>
                <th style="white-space: nowrap; border-width: 1px 0px 1px 1px; border-style: solid; border-color: rgb(0, 0, 0); padding: 0px 2px; text-align: left; cursor: default; width: 48px; font-weight: normal;" title="">Question</th>
                <th style="white-space: nowrap; border-width: 1px 0px 1px 1px; border-style: solid; border-color: rgb(0, 0, 0); padding: 0px 2px; text-align: right; cursor: default; width: 19px; font-weight: normal;" title="">i.O</th>
                <th style="white-space: nowrap; border-width: 1px 0px 1px 1px; border-style: solid; border-color: rgb(0, 0, 0); padding: 0px 2px; text-align: right; cursor: default; width: 29px; font-weight: normal;" title="">n.i.O</th>
                <th style="white-space: nowrap; border-width: 1px 0px 1px 1px; border-style: solid; border-color: rgb(0, 0, 0); padding: 0px 2px; text-align: left; cursor: default; width: 74px; font-weight: normal;" title="">Another check</th>
                <th style="white-space: nowrap; border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0); padding: 0px 2px; text-align: left; cursor: default; width: 78px; font-weight: normal;" title="">Commentary</th>
            </tr>
        </thead>
    </table>
    <div class="body" style="overflow: hidden auto; height: 100%; width: 100%;">
        <table cellspacing="0" cellpadding="0" style="table-layout: fixed; background:threedface">
            <tbody>
                <tr id="row_1">
                    <td id="GRD1_num_1" style="border-width:0px 0px 1px 1px;border-style:solid;border-color:#000000;padding: 0px 2px 0px 2px;;width:17px;text-align:right;white-space:nowrap;">1</td>
                    <td id="GRD1_0_0" row="1" col="1" editable="1" parentid="0" style="width:48px;height:1.2em;white-space:nowrap;background-color:#FFFFFF;border-width:0px 0px 1px 1px;border-style:solid;border-color:#000000;padding: 0px 2px 0px 2px;text-align:left;cursor:pointer;">Test 1</td>
                    <td id="GRD1_0_1" row="1" col="2" editable="3" parentid="0" checkstate="1" style="width:19px;height:1.2em;text-align:center;white-space:nowrap;background-color:#FFFFFF;border-width:0px 0px 1px 1px;border-style:solid;border-color:#000000;padding: 0px 2px 0px 2px;cursor:pointer;">
                        <input type="checkbox" style="margin:0px;padding:0px;" checked="checked" value="1">
                    </td>
                    <td id="GRD1_0_2" row="1" col="3" editable="3" parentid="0" checkstate="0" style="width:29px;height:1.2em;text-align:center;white-space:nowrap;background-color:#FFFFFF;border-width:0px 0px 1px 1px;border-style:solid;border-color:#000000;padding: 0px 2px 0px 2px;cursor:pointer;">
                        <input type="checkbox" style="margin:0px;padding:0px;" value="0">
                    </td>
                    <td id="GRD1_0_3" row="1" col="4" editable="3" parentid="0" checkstate="1" style="width:74px;height:1.2em;text-align:center;white-space:nowrap;background-color:#FFFFFF;border-width:0px 0px 1px 1px;border-style:solid;border-color:#000000;padding: 0px 2px 0px 2px;cursor:pointer;">
                        <input type="checkbox" style="margin:0px;padding:0px;" checked="checked" value="1">
                    </td>
                    <td id="GRD1_0_4" row="1" col="5" editable="1" parentid="0" style="width:78px;height:1.2em;white-space:nowrap;background-color:#FFFFFF;border-width:0px 1px 1px 1px;border-style:solid;border-color:#000000;padding: 0px 2px 0px 2px;text-align:left;cursor:pointer;">Commentary1</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

and this is how it looks when it is smaller ..

https://jsfiddle.net/mzue3j9t/1

Basil
  • 1,613
  • 12
  • 25
Daniel D
  • 35
  • 4
  • How about this one? https://datatables.net/extensions/responsive/examples/column-control/fixedHeader.html – Rohan Rao Jan 08 '20 at 09:16
  • looks nice, but not Possible. I have a DIV outside the Table this is recommend. And it should look that ugly as it do now .. :/ – Daniel D Jan 08 '20 at 09:57

2 Answers2

1

Create it with just 1 table and make th inside thead position sticky. 

<table>
  <thead>
    <tr>
      <th style="background:threedface;position: sticky; top: 0;"></th>
      ...
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      ...
    </tr>
    ...
  </tbody>
</table>

I don't know why you are writing inline styles. Is it an email template? else please create a separate css file and import it in the html.

Akhi Akl
  • 3,795
  • 1
  • 15
  • 26
  • okay Thank you, i will try it after lunch and will give you a answer if it worked. – Daniel D Jan 08 '20 at 09:44
  • Thank you, this worked! I've tried this before, a long time ago.. but not on only on the tag.. Thank you very much! – Daniel D Jan 08 '20 at 12:37
  • I have seen now, position: sticky is Experimantel and should not use in Production.. is this a Problem? And (because we have customers) Internet Explorer does not support this :/ (it would be nice if there is a solution too, maybe you have a solution yet?) – Daniel D Jan 08 '20 at 12:55
  • Then may be you have to deal it with position: fixed; and javaScript, but fixed position is relative to browser window – Akhi Akl Jan 09 '20 at 09:51
  • hm okay, thank you! I let it Position:sticky until anyone need it.. :D – Daniel D Jan 09 '20 at 12:50
0

I would suggest to clean up your code, remove the style tag from your HTML and create a CSS file for it. Doing that will allow you to debug the problem.

alternatively, I would suggest using some framework for tables which will render you work responsive to the page size, therefore no need to create different classes for each page size. I would use the Framework (https://getbootstrap.com/) however, there are other frameworks.

Carosihno
  • 22
  • 5
  • I can't do that, because its generated code out of Strings. It comes from c++ programm. It's weired to explain. All the code up is really bad code.. From time to time i clean it up, but it is not easy.. :D I have inherited this code so it's not my fault at all.. – Daniel D Jan 08 '20 at 09:43