Hi,
thanks for your post, and sorry for the trouble.
I’m not sure that I understand. Can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!
Regards,
Tobias
Thread Starter
dakldw
(@dakldw)
like this: https://thay104.github.io/ the table is centered but the border is full width of page
Hi,
thanks! From what I can see, they have centered the table using CSS like
.tablepress-id-123 {
margin: 0 auto !important;
width: 70% !important;
}
and then apply the border lines with a trick in CSS:
table.dataTable tbody th:before,
table.dataTable tbody td:before {
content:"";
border-bottom: 1px solid #E7E8E8;
position: absolute;
height: 100%;
width: 200vw;
left: -100vw;
bottom: 0;
z-index: -1;
top: 0;
}
Regards,
Tobias
Thread Starter
dakldw
(@dakldw)
after adding that css in, my website looks like this now: https://imgur.com/a/2jHmsvV its 70% width but not centered and the border lines did not extend
Hi,
Can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!
Regards,
Tobias
Thread Starter
dakldw
(@dakldw)
Hi,
ok, to center the table, please change
.tablepress-id-1 {
to
.dataTables_wrapper .tablepress-id-1 {
Unfortunately, I don’t see why the other borders are not showing up. I can only suggest that you play with the CSS from that original link some more.
Regards,
Tobias
Thread Starter
dakldw
(@dakldw)
after putting
position: relative;
in tbody and thead, the border lines show up but extend over the page width. fortunately, at least the centering worked.
Hi,
good to hear that the centering works now!
Regards,
Tobias
