First row doesn’t fix on the table while scrolling(using DataTables FixedHead))

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter ava71017

    (@ava71017)

    5 years, 5 months ago

    Also, I would like to know if I’m able to enable both “DataTables FixedHeader” & “Responsive Tables” plugins at the same time by using shortcode:
    [table id=123 datatables_fixedheader=top responsive=flip responsive_breakpoint=”phone” /]

    Thank you.

    Thread Starter ava71017

    (@ava71017)

    5 years, 5 months ago

    My current Custom CSS under the Plugin Options page is:

    .tablepress thead th,
    .tablepress tbody td {
    border: 1px solid #cccccc;
    }

    .tablepress thead th,
    .tablepress tfoot th {
    background-color: #ffffff;
    }

    .tablepress-id-12 .row-1 {
    background-color: #Ffffff;
    }

    .tablepress-id-12 .row-2 {
    background-color: #Ffffff;
    }

    .tablepress-id-12 .column-1 {
    background-color: #F8F8F9;
    }

    .tablepress-id-12 .row-1 {
    font-weight: bold;
    }

    .tablepress-id-12 .column-1 {
    font-weight: bold;
    }

    .tablepress-id-12 tbody td {
    height: 20px;
    }

    .tablepress-id-12 .column-2 {
    background-color: #ffffff;
    }

    .tablepress-id-12 .column-3 {
    background-color: #ffffff;
    }

    .tablepress-id-12 .column-1 {
    width: 180px;
    }

    .tablepress-id-12 .row-1 {
    background-color: #ffffff;
    }

    .entry-content .tablepress-id-12 {
    width: 60%;
    margin: 0 auto 1em;
    }

    .tablepress-id-15 .row-1 {
    background-color: #Ffffff;
    }

    .tablepress-id-15 .row-2 {
    background-color: #Ffffff;
    }

    .tablepress-id-15 .column-1 {
    background-color: #F8F8F9;
    }

    .tablepress-id-15 .row-1 {
    font-weight: bold;
    }

    .tablepress-id-15 .column-1 {
    font-weight: bold;
    }

    .tablepress-id-15 tbody td {
    height: 20px;
    }

    .tablepress-id-15 .column-2 {
    background-color: #ffffff;
    }

    .tablepress-id-15 .column-3 {
    background-color: #ffffff;
    }

    .tablepress-id-15 .column-1 {
    width: 180px;
    }

    .tablepress-id-15 .row-1 {
    background-color: #ffffff;
    }

    .entry-content .tablepress-id-15 {
    width: 60%;
    margin: 0 auto 1em;
    border: 1px solid #cccccc;
    }

    .tablepress-id-16 .row-1 {
    background-color: #Ffffff;
    }

    .tablepress-id-16 .row-2 {
    background-color: #Ffffff;
    }

    .tablepress-id-16 .column-1 {
    background-color: #F8F8F9;
    }

    .tablepress-id-16 .row-1 {
    font-weight: bold;
    }

    .tablepress-id-16 .column-1 {
    font-weight: bold;
    }

    .tablepress-id-16 tbody td {
    height: 20px;
    }

    .tablepress-id-16 .column-2 {
    background-color: #ffffff;
    }

    .tablepress-id-16 .column-3 {
    background-color: #ffffff;
    }

    .tablepress-id-16 .column-1 {
    width: 180px;
    }

    .tablepress-id-16 .row-1 {
    background-color: #ffffff;
    }

    .entry-content .tablepress-id-16 {
    width: 60%;
    margin: 0 auto 1em;
    border: 1px solid #cccccc;
    }

    .tablepress-id-18 .row-1 {
    background-color: #Ffffff;
    }

    .tablepress-id-18 .row-2 {
    background-color: #Ffffff;
    }

    .tablepress-id-18 .column-1 {
    background-color: #F8F8F9;
    }

    .tablepress-id-18 .row-1 {
    font-weight: bold;
    }

    .tablepress-id-18 .column-1 {
    font-weight: bold;
    }

    .tablepress-id-18 tbody td {
    height: 20px;
    }

    .tablepress-id-18 .column-2 {
    background-color: #ffffff;
    }

    .tablepress-id-18 .column-3 {
    background-color: #ffffff;
    }

    .tablepress-id-18 .column-1 {
    width: 180px;
    }

    .tablepress-id-18 .row-1 {
    background-color: #ffffff;
    }

    .tablepress-id-18 .column-2 {
    text-align: center;
    vertical-align: middle;
    }

    .entry-content .tablepress-id-18 {
    width: 46%;
    margin: 0 auto 1em;
    }

    .tablepress-id-19 .column-1 {
    background-color: #F8F8F9;
    }

    .tablepress-id-19 .row-1 {
    background-color: #F8F8F9;
    }

    .tablepress-id-19 .column-1 {
    font-weight: bold;
    }

    .tablepress-id-19 .row-1 {
    font-weight: bold;
    }

    .tablepress-id-19 tbody td {
    height: 20px;
    }

    .tablepress-id-19 .column-1 {
    width: 100px;
    }

    .tablepress-id-19 .column-2 {
    width: 150px;
    }

    .tablepress-id-19 .column-3 {
    width: 150px;
    }

    .tablepress-id-19 .column-4 {
    width: 150px;
    }

    .tablepress-id-19 .column-5 {
    width: 150px;
    }

    .tablepress-id-19 .column-6 {
    width: 150px;
    }

    .tablepress-id-19 tbody td,
    .tablepress-id-19 thead th {
    text-align: center;
    vertical-align: middle;
    }

    .tablepress-id-20 .column-1 {
    background-color: #F8F8F9;
    }

    .tablepress-id-20 .row-1 {
    background-color: #F8F8F9;
    }

    .tablepress-id-20 .column-1 {
    font-weight: bold;
    }

    .tablepress-id-20 .row-1 {
    font-weight: bold;
    }

    .tablepress-id-20 tbody td {
    height: 20px;
    }

    .tablepress-id-20 .column-1 {
    width: 100px;
    }

    .tablepress-id-20 .column-2 {
    width: 150px;
    }

    .tablepress-id-20 .column-3 {
    width: 150px;
    }

    .tablepress-id-20 .column-4 {
    width: 150px;
    }

    .tablepress-id-20 .column-5 {
    width: 150px;
    }

    .tablepress-id-20 .column-6 {
    width: 150px;
    }

    .tablepress-id-20 tbody td,
    .tablepress-id-20 thead th {
    text-align: center;
    vertical-align: middle;
    }

    .tablepress-id-21 .column-1 {
    background-color: #F8F8F9;
    }

    .tablepress-id-21 .row-1 {
    background-color: #F8F8F9;
    }

    .tablepress-id-21 .column-1 {
    font-weight: bold;
    }

    .tablepress-id-21 .row-1 {
    font-weight: bold;
    }

    .tablepress-id-21 tbody td {
    height: 20px;
    }

    .tablepress-id-21 .column-1 {
    width: 100px;
    }

    .tablepress-id-21 .column-2 {
    width: 150px;
    }

    .tablepress-id-21 .column-3 {
    width: 150px;
    }

    .tablepress-id-21 .column-4 {
    width: 150px;
    }

    .tablepress-id-21 .column-5 {
    width: 150px;
    }

    .tablepress-id-21 .column-6 {
    width: 150px;
    }

    .tablepress-id-21 tbody td,
    .tablepress-id-21 thead th {
    text-align: center;
    vertical-align: middle;
    }

    .entry-content .tablepress-id-21 {
    width: 60%;
    margin: 0 auto 1em;
    }

    .tablepress-id-25 .row-1 {
    background-color: #Ffffff;
    }

    .tablepress-id-25 .row-2 {
    background-color: #Ffffff;
    }

    .tablepress-id-25 .column-1 {
    background-color: #F8F8F9;
    }

    .tablepress-id-25 .row-1 {
    font-weight: bold;
    }

    .tablepress-id-25 .column-1 {
    font-weight: bold;
    }

    .tablepress-id-25 tbody td {
    height: 20px;
    }

    .tablepress-id-25 .column-2 {
    background-color: #ffffff;
    }

    .tablepress-id-25 .column-3 {
    background-color: #ffffff;
    }

    .tablepress-id-25 .column-1 {
    width: 180px;
    }

    .tablepress-id-25 .row-1 {
    background-color: #ffffff;
    }

    .entry-content .tablepress-id-25 {
    width: 54%;
    margin: 0 auto 1em;
    border: 1px solid #cccccc;
    }

    .tablepress-id-26 .row-1 {
    background-color: #Ffffff;
    }

    .tablepress-id-26 .row-2 {
    background-color: #Ffffff;
    }

    .tablepress-id-26 .column-1 {
    background-color: #F8F8F9;
    }

    .tablepress-id-26 .row-1 {
    font-weight: bold;
    }

    .tablepress-id-26 .column-1 {
    font-weight: bold;
    }

    .tablepress-id-26 tbody td {
    height: 20px;
    }

    .tablepress-id-26 .column-2 {
    background-color: #ffffff;
    }

    .tablepress-id-26 .column-3 {
    background-color: #ffffff;
    }

    .tablepress-id-26 .column-1 {
    width: 180px;
    }

    .tablepress-id-26 .row-1 {
    background-color: #ffffff;
    }

    .entry-content .tablepress-id-26 {
    width: 54%;
    margin: 0 auto 1em;
    border: 1px solid #cccccc;
    }

    .tablepress-id-27 .row-1 {
    background-color: #Ffffff;
    }

    .tablepress-id-27 .row-2 {
    background-color: #Ffffff;
    }

    .tablepress-id-27 .column-1 {
    background-color: #F8F8F9;
    }

    .tablepress-id-27 .column-1 {
    font-weight: bold;
    }

    .tablepress-id-27 tbody td {
    height: 20px;
    }

    .tablepress-id-27 .column-2 {
    background-color: #ffffff;
    }

    .tablepress-id-27 .column-3 {
    background-color: #ffffff;
    }

    .tablepress-id-27 .column-1 {
    width: 180px;
    }

    .tablepress-id-27 .row-1 {
    background-color: #ffffff;
    }

    .entry-content .tablepress-id-27 {
    width: 54%;
    margin: 0 auto 1em;
    border: 1px solid #cccccc;
    }

    .tablepress-id-28 .column-1 {
    background-color: #F8F8F9;
    }

    .tablepress-id-28 .column-5 {
    background-color: #F8F8F9;
    }

    .tablepress-id-28 .row-1 {
    background-color: #F8F8F9;
    }

    .tablepress-id-28 .column-1 {
    font-weight: bold;
    }

    .tablepress-id-28 .column-5 {
    font-weight: bold;
    }

    .tablepress-id-28 .row-1 {
    font-weight: bold;
    }

    .tablepress-id-28 tbody td {
    height: 20px;
    }

    .tablepress-id-28 .column-1 {
    width: 100px;
    }

    .tablepress-id-28 .column-2 {
    width: 150px;
    }

    .tablepress-id-28 .column-3 {
    width: 150px;
    }

    .tablepress-id-28 .column-4 {
    width: 150px;
    }

    .tablepress-id-28 .column-5 {
    width: 100px;
    }

    .tablepress-id-28 .column-6 {
    width: 150px;
    }

    .tablepress-id-28 .column-7 {
    width: 150px;
    }

    .tablepress-id-28 tbody td,
    .tablepress-id-28 thead th {
    text-align: center;
    vertical-align: middle;
    }

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    5 years, 5 months ago

    Hi,

    thanks for your post, and sorry for the trouble.

    Unfortunately, you will not be able to the FixedHeader with this table. In fact, you will not be able to use the JavaScript features with this table, as it contains merged/combined cells (via the #colspan# keyword).
    Therefore, you should actually uncheck the “Use DataTables” checkbox on the table’s “Edit” screen, to get rid of a JavaScript error.

    Even if this table could use the FixedHeader, it will not work together with the flip mode, sorry.

    Regards,
    Tobias

    Thread Starter ava71017

    (@ava71017)

    5 years, 5 months ago

    Hello Tobias,

    Thank you so much for your prompt reply. I tried the settings, however, I still not able to make the table’s first raw fixed while scrolling.

    I’m not sure if I get you wrong so it doesn’t work. The following is the new screenshot of the table setting. I had 1. removed all the #colspan# & #rowspan# & 2. uncheck the “Use DataTables” checkbox

    Screenshot of the new table setting:
    https://drive.google.com/file/d/169GJ-oMSNtiVeiyonGVK_r7FVGd6RGi5/view?usp=sharing

    Would you please help me to check my new setting too? Thank you so much.

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    5 years, 5 months ago

    Hi,

    unfortunately, there’s another problem: Your table is shown in a tab. This means that it’s initially hidden so that certain things like width calculations are not possible. Also, your table will need a header row first.

    Regards,
    Tobias

    Thread Starter ava71017

    (@ava71017)

    5 years, 5 months ago

    I see. Thank you so much for your patience.

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    5 years, 5 months ago

    Hi,

    sure! Sorry for not having better news.

    Best wishes,
    Tobias

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

The topic ‘First row doesn’t fix on the table while scrolling(using DataTables FixedHead))’ is closed to new replies.