Test Responsive Tables

Working test to make a JTRT table responsive.

CaravanYearSizePricePictures
Carnaby Crown199712 x 32£4,000 View
Atlas Deauville199812 x 32£4,000-
Cosalt Coaster200212 x 30£4,500-
Cosalt Coaster 3b200210 x 36£4,750-
Cosalt Capri200012 x 35£4,750-
Carnaby Crown DL200012 x 35£5,000 View
Cosalt Resort200312 x 36£5,000-
Willerby Gainsborough199812 x 35£5,000-
Cosalt Resort200310 x 35£5,500-
Willerby Westmorland200212 x 32£5,500-
Willerby Westmorland200312 x 28£5,500-
Casalt Carlton200312 x 33£7,250-
Cosalt Carlton200412 x 33£7,750-
ABI Brisbane200412 x 32£8,750 View
Cosalt Riviera
Las Palmas
200512 X 36£9,500-
Cosalt Devon200112 x 35£10,000 View
ABI Vista Platinum201012 x 36£12,500 View
Willerby Rio201012 x 35£14,500 View
Pemberton Elite201112 x 32£16,000
Atlas Debonair201512 x 36£25,000 View
ABI TriesteNew12 x 36£28,848-
Carnaby OakdaleNew12 x 32£33,273View
Atlas DebonairNew12 x 36£37,470View
ABI St DavidNew12 x 38£39,258View
Pemberton MarlowNew12 x 37£44,290View

 

This CSS currently works on 1 table

CCS code to apply to make a specific JTRT table no 526 responsive.

/*
Code to make a JTRT table look better
*/

#jtrt_table_526 {
width: 100%;
}

#jtrt_table_526 thead tbody td {
line-height: 100%;
padding: 10px;
}

#jtrt_table_526 tr:nth-child(even) {
background-color: #f2f2f2;
}

/*
CSS to make a JTRT table responsive in a good way
*/

@media screen and (max-width: 600px) {
#jtrt_table_526 {
border: 0;
}

#jtrt_table_526 thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}

#jtrt_table_526 tr {
border: 1px solid #ddd;
display: block;
margin-bottom: 1em;
}

#jtrt_table_526 td {
border-bottom: 1px solid #ddd;
display: block;
font-size: .8em;
text-align: right;
}

#jtrt_table_526 td:nth-child(1)::before {
content: “Caravan”;
float: left;
font-weight: bold;
text-transform: uppercase;
}

#jtrt_table_526 td:nth-child(2)::before {
content: “Year”;
float: left;
font-weight: bold;
text-transform: uppercase;
}

#jtrt_table_526 td:nth-child(3)::before {
content: “Status”;
float: left;
font-weight: bold;
text-transform: uppercase;
}

#jtrt_table_526 td:nth-child(4)::before {
content: “Size”;
float: left;
font-weight: bold;
text-transform: uppercase;
}

#jtrt_table_526 td:nth-child(5)::before {
content: “Price”;
float: left;
font-weight: bold;
text-transform: uppercase;
}

}

This CSS currently works on all the named tables

CCS code to apply to make a number of JTRT tables responsive.

/*
Make all your Caravans For Sale and Caravans For Hire JTRT tables look nice
*/

#jtrt_table_526,
#jtrt_table_850,
#jtrt_table_868,
#jtrt_table_865,
#jtrt_table_866,
#jtrt_table_867,
#jtrt_table_904{
width: 100%;
}

#jtrt_table_526 thead tbody td,#jtrt_table_850 thead tbody td,#jtrt_table_868 thead tbody td,#jtrt_table_865 thead tbody td,#jtrt_table_866 thead tbody td,#jtrt_table_867 thead tbody td {
line-height: 100%;
padding: 10px;
}

#jtrt_table_526 tr:nth-child(even),#jtrt_table_850 tr:nth-child(even),#jtrt_table_868 tr:nth-child(even),#jtrt_table_865 tr:nth-child(even),#jtrt_table_866 tr:nth-child(even),#jtrt_table_867 tr:nth-child(even),#jtrt_table_904 tr:nth-child(even){
background-color: #f2f2f2;
}
/*
Make all your Caravans For Sale JTRT tables responsive in a good way
*/

@media screen and (max-width: 600px)
{

h1.entry-title {
line-height:100%;
margin-top: 0em;
margin-bottom: 0.4em
}

#jtrt_table_526,
#jtrt_table_850,
#jtrt_table_868,
#jtrt_table_865,
#jtrt_table_866,
#jtrt_table_867 {
border: 0;
}

#jtrt_table_526 thead,
#jtrt_table_850 thead,
#jtrt_table_868 thead,
#jtrt_table_865 thead,
#jtrt_table_866 thead,
#jtrt_table_867 thead{
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}

#jtrt_table_526 tr,
#jtrt_table_850 tr,
#jtrt_table_868 tr,
#jtrt_table_865 tr,
#jtrt_table_866 tr,
#jtrt_table_867 tr {
border: 1px solid #ddd;
display: block;
margin-bottom: 1em;
}

#jtrt_table_526 td,
#jtrt_table_850 td,
#jtrt_table_868 td,
#jtrt_table_865 td,
#jtrt_table_866 td,
#jtrt_table_867 td {
border-bottom: 1px solid #ddd;
display: block;
font-size: .8em;
text-align: right;
}

#jtrt_table_526 tr:nth-child(odd),#jtrt_table_850 tr:nth-child(odd),#jtrt_table_868 tr:nth-child(odd),#jtrt_table_865 tr:nth-child(odd),#jtrt_table_866 tr:nth-child(odd),#jtrt_table_867 tr:nth-child(odd) {
background-color: #e6ffe6;
}

#jtrt_table_526 td:nth-child(1)::before,
#jtrt_table_850 td:nth-child(1)::before,
#jtrt_table_868 td:nth-child(1)::before,
#jtrt_table_865 td:nth-child(1)::before,
#jtrt_table_866 td:nth-child(1)::before,
#jtrt_table_867 td:nth-child(1)::before
{
content: “Caravan”;
float: left;
font-weight: bold;
text-transform: uppercase;
}

#jtrt_table_526 td:nth-child(2)::before,
#jtrt_table_850 td:nth-child(2)::before,
#jtrt_table_868 td:nth-child(2)::before,
#jtrt_table_865 td:nth-child(2)::before,
#jtrt_table_866 td:nth-child(2)::before,
#jtrt_table_867 td:nth-child(2)::before {
content: “Year”;
float: left;
font-weight: bold;
text-transform: uppercase;
}

#jtrt_table_526 td:nth-child(3)::before,
#jtrt_table_850 td:nth-child(3)::before,
#jtrt_table_868 td:nth-child(3)::before,
#jtrt_table_865 td:nth-child(3)::before,
#jtrt_table_866 td:nth-child(3)::before,
#jtrt_table_867 td:nth-child(3)::before {
content: “Size”;
float: left;
font-weight: bold;
text-transform: uppercase;
}

#jtrt_table_526 td:nth-child(4)::before,
#jtrt_table_850 td:nth-child(4)::before,
#jtrt_table_868 td:nth-child(4)::before,
#jtrt_table_865 td:nth-child(4)::before,
#jtrt_table_866 td:nth-child(4)::before,
#jtrt_table_867 td:nth-child(4)::before {
content: “Status”;
float: left;
font-weight: bold;
text-transform: uppercase;
}

#jtrt_table_526 td:nth-child(5)::before,
#jtrt_table_850 td:nth-child(5)::before,
#jtrt_table_868 td:nth-child(5)::before,
#jtrt_table_865 td:nth-child(5)::before,
#jtrt_table_866 td:nth-child(5)::before,
#jtrt_table_867 td:nth-child(5)::before {
content: “Price”;
float: left;
font-weight: bold;
text-transform: uppercase;
}

#jtrt_table_526 td:nth-child(6)::before,
#jtrt_table_850 td:nth-child(6)::before,
#jtrt_table_868 td:nth-child(6)::before,
#jtrt_table_865 td:nth-child(6)::before,
#jtrt_table_866 td:nth-child(6)::before,
#jtrt_table_867 td:nth-child(6)::before {
content: “Pictures”;
float: left;
font-weight: bold;
text-transform: uppercase;
}

}

HTML & CSS Combo To Create Responsive Tables

This does exactly what you want. The HTML is put in the page and the CSS is put in the Additional CSS Screen. Now you need to find a way to apply the CSS to a table that is easy to create.

You got this code from https://codepen.io/AllThingsSmitty/pen/MyqmdM

Here is another page by same developer with a bit more explanation of how the code works. The problem you are having applying it to other plugin tables is to do with the data-label ‘s being named in the html and then being referred to in the CSS. If you can refer to them you can get them to appear left aligned in collapsed screen.
https://allthingssmitty.com/2016/10/03/responsive-table-layout/

Account Due Date Amount Period
Visa – 3412 04/01/2016 $1,190 03/01/2016 – 03/31/2016
Visa – 6076 03/01/2016 $2,443 02/01/2016 – 02/29/2016
Corporate AMEX 03/01/2016 $1,181 02/01/2016 – 02/29/2016
Visa – 3412 02/01/2016 $842 01/01/2016 – 01/31/2016

Responsive TablePress Table With Collapsibility

Responsive table that shows an expand button on a mobile device, to show hidden columns. This is controlled by the Responsive Tables extra code which enhances the TablePress plugin.

[table “10” not found /]