PHWOW com login.Makakuha ng libreng 700pho sa bawat deposito

Resolved

(@demaier)

Hello,

When I enable “Horizontal Scrolling” on my tables it is creating a duplicated “thead” creating a space between the table header and table content.


<thead>
<tr class="row-1 odd" role="row" style="height: 0px;"><th class="column-1 sorting" aria-controls="tablepress-44" rowspan="1" colspan="1" style="width: 149px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;"><div class="dataTables_sizing" style="height:0;overflow:hidden;">Category</div></th><th class="column-2 sorting" aria-controls="tablepress-44" rowspan="1" colspan="1" style="width: 484px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;"><div class="dataTables_sizing" style="height:0;overflow:hidden;">Institution</div></th><th class="column-3 sorting" aria-controls="tablepress-44" rowspan="1" colspan="1" style="width: 215px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;"><div class="dataTables_sizing" style="height:0;overflow:hidden;">Address</div></th><th class="column-4 sorting" aria-controls="tablepress-44" rowspan="1" colspan="1" style="width: 143px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;"><div class="dataTables_sizing" style="height:0;overflow:hidden;">Phone</div></th><th class="column-5 sorting" aria-controls="tablepress-44" rowspan="1" colspan="1" style="width: 77px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;"><div class="dataTables_sizing" style="height:0;overflow:hidden;">Rental</div></th></tr>
</thead>

Does anyone have experienced this before? Any help is appreciated!

Viewing 6 replies - 1 through 6 (of 6 total)

Plugin Author Tobias B?thge
(@tobiasbg)

8 years, 2 months ago

Hi,

thanks for your post, and sorry for the trouble.

To some degree, this is expected, as this is how the DataTables JS library implements this feature.

As an alternative, that does not do this, you could use the scroll mode of the TablePress Extension from https://tablepress.org/extensions/responsive-tables/

Regards,
Tobias
Thread Starter Daniel Maier
(@demaier)

8 years, 2 months ago
I found this which helped me tweak my CSS in order to fix the issue.

https://datatables.net/forums/discussion/2765/a-side-effect-of-vertical-scroll-feature-creating-two-thead-sections

For whatever reason, probably needed at some time, I had the following code:
```
.tablepress {
    th {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }
}
```
This was stopping the following code, suggested on the link above, from working properly:

.dataTables_scrollBody table thead tr { height:0px; }

However, the “height: 0px;” is already on the “.dataTables_scrollBody table thead tr”. So, by only removing my paddings it allowed the already existent “height: 0px;” to do its job.

Thanks!
Thread Starter Daniel Maier
(@demaier)

8 years, 2 months ago

Thank you for your suggestion as well Tobias!

Plugin Author Tobias B?thge
(@tobiasbg)

8 years, 2 months ago

Hi,

it’s interesting that a padding on the th elements prevents the height setting on the tr… Nice find!

Best wishes,
Tobias

Thread Starter Daniel Maier
(@demaier)

8 years, 2 months ago

Indeed Tobias, very interesting. ??

Thank you!

Plugin Author Tobias B?thge
(@tobiasbg)

8 years, 2 months ago

Hi,

no problem, you are very welcome! ?? Good to hear that this helped!

Best wishes,
Tobias

P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Horizontal Scrolling enabled creates two theads’ is closed to new replies.