Show specific rows in tablepress collapse mode
-
Using the following code to collapse the table when website is visited in mobile.
[table id=18 responsive=collapse responsive_breakpoint="phone"/]
So I have 6 columns in my table. For example column1,column2,….column6
When the table collapses in mobile view, then column1 and column2 are being shown and the rest shows when someone clicks on + sign
However, is there any way yo show column3 and column6 when collapsed table is viewed in mobile.
-
Hi,
thanks for your post, and sorry for the trouble.
For that, please add this to the “Custom Commands” text field on the table’s “Edit” screen:
"columnDefs": [ { "className": "all", "targets": [ 2, 5 ] } ]
This follows the class definitions from https://datatables.net/extensions/responsive/classes
Regards,
TobiasThank you for the help.
I will surely try it.Sorry for the trouble, But I need help with another thing
I am unable to center align the buttons..tablepress.state tbody td.column-6 a { background-color: #000000; border: 1px #ffffff; margin: 0 auto; font-family: montserrat; color: white; border-radius: 5px; padding: 8px 15px; font-size: 16px; vertical-align: middle; white-space: nowrap; }
Need to vertically align as well as center the button in the cell.
Hi,
you will have to apply the centering to the table cells, e.g. by using
.tablepress-id-18 .column-6 { text-align: center; vertical-align: middle; }
Regards,
TobiasThank you.
I got into a trouble again.
Screenshot the red marked area are the buttons which are not centered in the cell.Is there a way to align them horizontally also
The Website@media screen and (min-width: 1025px) { .dataTables_filter input { border-radius: 5px; padding: 2px; font-size: 12px; } .dataTables_filter label input { width: 200px; } .dataTables_filter label { border-radius: 5px; font-size: 12px; } .dataTables_length label { font-size: 12px; } .dataTables_length label select { font-size: 12px; padding: 2px; } .dataTables_info { font-size: 12px; color: #3aafa9; } .dataTables_paginate.paging_simple { font-size: 12px; } .tablepress.state thead th { font-size: 14px; font-family: Poppins; text-transform: uppercase; background-color: #000000; color: #ffffff; padding-top: 5px; text-align: center; vertical-align: middle; white-space: wrap; padding-bottom: 5px; } .tablepress.state tbody td.column-1 { font-family: Poppins; font-size: 14px; font-weight: normal; color: #000000; text-align: center; vertical-align: middle; word-break: break-word; white-space: wrap; width: 12%; } .tablepress.state tbody td.column-2 { font-family: Poppins; font-size: 14px; font-weight: normal; color: #000000; text-align: center; vertical-align: middle; word-break: break-word; white-space: wrap; width: 23%; } .tablepress.state tbody td.column-3 { font-family: Poppins; font-size: 14px; font-weight: normal; color: #000000; text-align: center; vertical-align: middle; word-break: break-word; white-space: wrap; width: 22%; } .tablepress.state tbody td.column-4 { font-family: Poppins; font-size: 14px; font-weight: normal; color: #000000; text-align: center; vertical-align: middle; word-break: break-word; white-space: wrap; width: 13%; } .tablepress.state tbody td.column-5 { font-family: Poppins; font-size: 14px; font-weight: normal; color: #000000; text-align: center; vertical-align: middle; word-break: break-word; white-space: wrap; width: 10%; } .tablepress.state tbody td.column-6 { font-family: Poppins; font-size: 14px; font-weight: normal; color: #000000; text-align: center; vertical-align: middle; word-break: break-word; white-space: wrap; width: 10%; } .tablepress.state tbody td.column-7 a { text-align: center; background-color: #000000; border: 1px #ffffff; margin: 0 auto; font-family: montserrat; color: white; border-radius: 5px; padding: 5px 7px; text-decoration: none; font-size: 14px; vertical-align: middle; white-space: nowrap; } }
-
This reply was modified 2 years, 6 months ago by
dilshad9692. Reason: Added code
Hi,
the CSS code from above still applies here. You will just have to change the 6 to a 7, as the buttons are in column 7, and you should not put this into the CSS media query as this would then only be applied on screens wider than 1024 pixels.
Regards,
TobiasThank you,
I shared only one media query. Although, I have made for different sizes. But thanks for the reminder.
Sorry couldn’t get what do you mean by this
You will just have to change the 6 to a 7, as the buttons are in column 7,
The buttons are in column 7
Sharing the full code
@media screen and (max-width: 767px) { .dataTables_filter input { border-radius: 5px; padding: 2px; font-size: 8px; } .dataTables_filter label input { width: 100px; } .dataTables_filter label { border-radius: 5px; font-size: 8px; } .dataTables_length label { font-size: 8px; } .dataTables_length label select { font-size: 8px; padding: 2px; } .dataTables_info { font-size: 8px; color: #3aafa9; } .dataTables_paginate.paging_simple { font-size: 8px; } .tablepress.state thead th { font-size: 10px; font-family: Poppins; text-transform: uppercase; background-color: #000000; color: #ffffff; padding-top: 5px; text-align: center; vertical-align: middle; white-space: wrap; padding-bottom: 5px; } .tablepress.state tbody td.column-2, .tablepress.state tbody td.column-3, .tablepress.state tbody td.column-4 { font-family: Poppins; font-size: 10px; font-weight: normal; color: #000000; text-align: center; vertical-align: middle; word-break: break-word; white-space: wrap; width: 26.6%; } .tablepress.state tbody td.column-7 a { background-color: #000000; border: 1px #ffffff; margin: 0 auto; font-family: montserrat; color: white; border-radius: 5px; padding: 5px 7px; text-decoration: none; font-size: 10px; vertical-align: middle; text-align: center; white-space: nowrap; width: 20.2%; } .tablepress.state .column-1 { display: none; } .tablepress.state .column-5 { display: none; } .tablepress.state .column-6 { display: none; } } @media screen and (min-width: 768px) and (max-width: 1024px) { .dataTables_filter input { border-radius: 5px; padding: 2px; font-size: 10px; } .dataTables_filter label input { width: 150px; } .dataTables_filter label { border-radius: 5px; font-size: 10px; } .dataTables_length label { font-size: 10px; } .dataTables_length label select { font-size: 10px; padding: 2px; } .dataTables_info { font-size: 10px; color: #3aafa9; } .dataTables_paginate.paging_simple { font-size: 10px; } .tablepress.state thead th { font-size: 12px; font-family: Poppins; text-transform: uppercase; background-color: #000000; color: #ffffff; padding-top: 5px; text-align: center; white-space: wrap; vertical-align: middle; padding-bottom: 5px; } .tablepress.state tbody td.column-1, .tablepress.state tbody td.column-2, .tablepress.state tbody td.column-3, .tablepress.state tbody td.column-4 { font-family: Poppins; font-size: 12px; font-weight: normal; color: #000000; text-align: center; vertical-align: middle; word-break: break-word; white-space: wrap; width: 21.25%; } .tablepress.state tbody td.column-7 a { background-color: #000000; border: 1px #ffffff; margin: 0 auto; font-family: montserrat; color: white; border-radius: 5px; padding: 5px 7px; text-decoration: none; font-size: 12px; vertical-align: middle; text-align: center; white-space: nowrap; width: 15%; } .tablepress.state .column-5 { display: none; } .tablepress.state .column-6 { display: none; } } @media screen and (min-width: 1025px) { .dataTables_filter input { border-radius: 5px; padding: 2px; font-size: 12px; } .dataTables_filter label input { width: 200px; } .dataTables_filter label { border-radius: 5px; font-size: 12px; } .dataTables_length label { font-size: 12px; } .dataTables_length label select { font-size: 12px; padding: 2px; } .dataTables_info { font-size: 12px; color: #3aafa9; } .dataTables_paginate.paging_simple { font-size: 12px; } .tablepress.state thead th { font-size: 14px; font-family: Poppins; text-transform: uppercase; background-color: #000000; color: #ffffff; padding-top: 5px; text-align: center; vertical-align: middle; white-space: wrap; padding-bottom: 5px; } .tablepress.state tbody td.column-1 { font-family: Poppins; font-size: 14px; font-weight: normal; color: #000000; text-align: center; vertical-align: middle; word-break: break-word; white-space: wrap; width: 12%; } .tablepress.state tbody td.column-2 { font-family: Poppins; font-size: 14px; font-weight: normal; color: #000000; text-align: center; vertical-align: middle; word-break: break-word; white-space: wrap; width: 23%; } .tablepress.state tbody td.column-3 { font-family: Poppins; font-size: 14px; font-weight: normal; color: #000000; text-align: center; vertical-align: middle; word-break: break-word; white-space: wrap; width: 22%; } .tablepress.state tbody td.column-4 { font-family: Poppins; font-size: 14px; font-weight: normal; color: #000000; text-align: center; vertical-align: middle; word-break: break-word; white-space: wrap; width: 13%; } .tablepress.state tbody td.column-5 { font-family: Poppins; font-size: 14px; font-weight: normal; color: #000000; text-align: center; vertical-align: middle; word-break: break-word; white-space: wrap; width: 10%; } .tablepress.state tbody td.column-6 { font-family: Poppins; font-size: 14px; font-weight: normal; color: #000000; text-align: center; vertical-align: middle; word-break: break-word; white-space: wrap; width: 10%; } .tablepress.state tbody td.column-7 a { text-align: center; background-color: #000000; border: 1px #ffffff; margin: 0 auto; font-family: montserrat; color: white; border-radius: 5px; padding: 5px 7px; text-decoration: none; font-size: 14px; vertical-align: middle; white-space: nowrap; } }
Hi,
you will need something like
.tablepress-id-18 .column-7 { text-align: center; vertical-align: middle; }
in your CSS somewhere (for the correct media query).
Or, you have to remove thea
after.tablepress.state tbody td.column-7
so that you actually target the table cell and not just the link/button in it.Regards,
TobiasThank you. Works like a charm.
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!Please help me out with one thing.
WebsiteI have added few css and javascript on buttons to when clicked shows a different table.
But when used in mobile. The size of table is not right.
when the page opens the block containing the table in 1st SS is already open. Hence the size is perfect.
However, when button is clicked to close the block and open another block containing another table then the size of table is not right as seen in 2nd Screenshot.Please help.
Hi,
this is because the tables are initially hidden. The JavaScript code can then not calculate certain things like column widths properly (because invisible elements don’t have a width).
You will need to add another JS call to your button clicks, like
jQuery('#tablepress-123').DataTable().columns.adjust().responsive.recalc();
See https://datatables.net/reference/api/responsive.recalc() for an explanation.
Regards,
TobiasYou are marvelous man. Sorry for so many question. I have never done coding in my life and started 3 months back and just by doing what I am doing now I made talentindustry.in
All thanks to guys like you for support. Will surely donate once I start earning.
Hi,
great! Good to hear that this helped!
Best wishes,
Tobias -
This reply was modified 2 years, 6 months ago by
- The topic ‘Show specific rows in tablepress collapse mode’ is closed to new replies.