CSS for Ninja Table with column overflow

80 Views Asked by At

I would appreciate some help figuring out CSS (responsive/mobile) for Ninja Tables with multiple columns (bus schedules). I've spent hours trying to figure it. The tables need to scroll both horizontally and vertically, which I believe I've accomplished. I'm having a couple of issues:

When scrolling horizontally on phones, it scrolls, but it can't scroll to the last few columns, unless I decrease padding and the font size. Is this because there are too many columns, or can this be fixed? I'd prefer not to change the font size too much.

Tables have sticky headers, but when the table gets to the top of my phone's screen, the header doesn't scroll with the row content, and the row content can be moved on its own, so the columns and rows don't match up. This only happens at the very top of my phone. When viewing the tables in the middle of the screen, the header works fine (but I can't scroll all the way to the right to see all the columns.)

How do I center the table on the desktop and mobile screen?

This is an example of what I would like tables/bus schedules to look like on mobile, although some of my tables have up to 13 columns: https://www.rit.edu/parking/10-175-jefferson-perkins-park-point

`/* Full BLue Line M-F MOBILE */
@media screen and (max-width: 650px) {
#footable_parent_137872 table.ninja_table_pro > thead {
    max-width: 500px!important;
    height:auto!important;
    white-space: wrap;
    text-wrap: wrap;
    word-break: keep-all!important;
    position: sticky!important;
    top: 0!important;
    position: -webkit-sticky!important;
    z-index: 1;
}
}`


/* Full BLue Line M-F MOBILE */
@media screen and (max-width: 650px) {
#footable_parent_137872 table.ninja_table_pro > tbody > tr {
    max-width:550px!important
    overflow-y: scroll;
    overflow-x: scroll;
    white-space: wrap;
    text-wrap: wrap;
    word-break: keep-all!important;
    position: sticky!important;
    font-size: 13px;
}
}

@media screen and (max-width: 650px) {
table.ninja_table_pro tr  {
    text-align: center!important;
    font-size: 15px;
}
}

@media screen and (max-width: 650px) {
#footable_parent_137872  table.ninja_table_pro th {
    padding: 1px!important;
    font-size: 9px!important;
}
}


/* Blue Line M_F DESKTOP */
#footable_parent_137872 table.ninja_table_pro {
    align: center;
    width: 75%!important;
    height:500px!important;
    overflow-y: scroll;
    overflow-x: scroll;
    display: block;
    white-space: wrap;
    text-wrap: wrap;
    word-break: keep-all!important;
   align-items: center; 
   justify-content: center;
}
0

There are 0 best solutions below