Responsive tables

About the template and stylesheet - and changing the menu
Post Reply
wbs
Posts: 122
Joined: Sun Apr 02, 2017 8:05 am

Responsive tables

Post by wbs » Thu Apr 13, 2017 9:30 pm

I'm using following css for responsive tables

Code: Select all

/* tables */
table {
   border-collapse: collapse;
}
td, th {
   padding: 1em;
}
th:first-child {
   padding-left: .5em;
}
th:last-child, td:last-child {
   padding-right: .5em;
}
thead th {
   border-bottom: 2px solid yellow;
}
tbody th {
   font-weight: normal;
   text-align: left;
}
th a {
   padding: 15px 5px 15px 40px;
}
td {
   text-align: center;
}
td a {
   text-decoration: underline;
}

@media screen and (max-width: 42em) {
   table, tbody, tr {
   display: block;
   }
   thead {
      display: none;
   }
   tr:first-child {
      border-top: 2px solid yellow;
   }
   tr {
      border-bottom: 2px solid yellow;
      padding: .5em 2em 1em;
   }
   th::before { /* i don't need this one because thead isn't displayed, right? */
      content: "Rang: ";
   }
   td:nth-child(1)::before {
      font-weight: bold;
      content: "Rang: ";
   }
   td:nth-child(3)::before {
      font-weight: bold;
      content: "Spiele: ";
   }
   td:nth-child(4)::before {
   font-weight: bold;
   content: "Siege: ";
   }
   td:nth-child(5)::before {
      font-weight: bold;
      content: "Unetschieden: ";
   }
   td:nth-child(6)::before {
      font-weight: bold;
      content: "Niederlagen: ";
   }
   td:nth-child(7)::before {
   font-weight: bold;
   content: "Tore: ";
   }
   td:nth-child(8)::before {
   font-weight: bold;
   content: "+/-: ";
   }
   td:nth-child(9)::before {
   font-weight: bold;
   content: "Punkte: ";
   }
   tbody th {
      display: block;
      font-weight: bold;
   }
   th a {
      font-weight: normal;
   }
   td {
      display: inline-block;
   min-width: 30%;
   padding: .2em 2em;
   text-align: left;
   }
   td:nth-child(3) {
      text-align: left;
   }
}
@media screen and (max-width: 33em) {
   td {
      display: block;
   }
   tr {
      padding: .5em .5em 1em;
   }
} }
}
What is the best method, to create different table styles so I can make different tables responsive differently. I have to change the "before" texts for different tables. Do I create ids or something else? How should it look like?

/edit: I've updated my actual css for tables
Last edited by wbs on Fri Apr 14, 2017 12:02 am, edited 1 time in total.

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: Responsive tables

Post by cmb » Thu Apr 13, 2017 11:28 pm

wbs wrote:What is the best method, to create different table styles so I can make different tables responsive differently. I have to change the "before" texts for different tables. Do I create ids or something else? How should it look like?
To have different tables styles, consider to use CSS classes. These allow to have multiple tables on the same page using the same styles. Nowadays, I usually use IDs only to emphasize that the element is unique on a page, what is useful for setting anchors which can be navigated to by specifying the respective URL fragment, for instance. Also it is important to note that the specificity of IDs is higher than that of classes.

Regarding the :before contents: why don't you add them to the table in the first place? Using CSS to generate content requires the client to recognize the CSS – not all clients are able to.

For potential alternatives to CSS only responsive tables see Tablesorter_XH and Tablecolums (which is planned to be integrated into Tablesorter_XH).
Christoph M. Becker – Plugins for CMSimple_XH

wbs
Posts: 122
Joined: Sun Apr 02, 2017 8:05 am

Re: Responsive tables

Post by wbs » Thu Apr 13, 2017 11:54 pm

I want the :before contents: only on small displays. I'm removing thead and only display one column for mobile devices.
How can I wrap the part with the :before/after contents: for table style="specialtablestyle"?

I'll try out those plugins, but I'd like to know how it is done with css.

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: Responsive tables

Post by cmb » Fri Apr 14, 2017 12:02 am

wbs wrote:How can I wrap the part with the :before/after contents: for table style="specialtablestyle"?
If you mean <table class="specialtablestyle"> you can do something like this:

Code: Select all

table {/* general table styles */}
th:before {/* general table heading styles */}

table.specialtablestyle { /* special table styles */}
table.specialtablestyle th:before {/* special table heading styles */} 
Christoph M. Becker – Plugins for CMSimple_XH

wbs
Posts: 122
Joined: Sun Apr 02, 2017 8:05 am

Re: Responsive tables

Post by wbs » Fri Apr 14, 2017 12:04 am

Ok, so I need to put a table.specialtablestyle before all the lines that produce after and before-content?

/edit: Ok, that works, but I have to set the table style in the html, it doesn't work with class.
/edit: No, it actually works with class and with id in the html code.
/edit: Ok, it doesn't work. Tables with no id still geht the :before/after contents: :-|
/edit: The new CSS looks like this:

Code: Select all

/* tables */
table {
   border-collapse: collapse;
}
td, th {
   padding: 1em;
}
th:first-child {
   padding-left: .5em;
}
th:last-child, td:last-child {
   padding-right: .5em;
}
thead th {
   border-bottom: 2px solid yellow;
}
tbody th {
   font-weight: normal;
   text-align: left;
}
th a {
   padding: 15px 5px 15px 40px;
}
td {
   text-align: center;
}
td a {
   text-decoration: underline;
}

@media screen and (max-width: 42em) {
   table, tbody, tr {
   display: block;
   }
   thead {
      display: none;
   }
   tr:first-child {
      border-top: 2px solid yellow;
   }
   tr {
      border-bottom: 2px solid yellow;
      padding: .5em 2em 1em;
   }
   table.tabelle-endstand, td:nth-child(1)::before {
      font-weight: bold;
      content: "Rang: ";
   }
   table.tabelle-endstand, td:nth-child(3)::before {
      font-weight: bold;
      content: "Spiele: ";
   }
   table.tabelle-endstand, td:nth-child(4)::before {
   font-weight: bold;
   content: "Siege: ";
   }
   table.tabelle-endstand, td:nth-child(5)::before {
      font-weight: bold;
      content: "Unetschieden: ";
   }
   table.tabelle-endstand, td:nth-child(6)::before {
      font-weight: bold;
      content: "Niederlagen: ";
   }
   table.tabelle-endstand, td:nth-child(7)::before {
   font-weight: bold;
   content: "Tore: ";
   }
   table.tabelle-endstand, td:nth-child(8)::before {
   font-weight: bold;
   content: "+/-: ";
   }
   table.tabelle-endstand, td:nth-child(9)::before {
   font-weight: bold;
   content: "Punkte: ";
   }
   tbody th {
      display: block;
      font-weight: bold;
   }
   th a {
      font-weight: normal;
   }
   td {
      display: inline-block;
   min-width: 30%;
   padding: .2em 2em;
   text-align: left;
   }
   td:nth-child(3) {
      text-align: left;
   }
}
@media screen and (max-width: 33em) {
   td {
      display: block;
   }
   tr {
      padding: .5em .5em 1em;
   }
}
If i delete the kommas in table.tabelle-endstand, td:nth-child(6)::before none of my tables are formatted, not even those with table id="tabelle-endstand"

I got the code from here: https://wiki.selfhtml.org/wiki/CSS/Anwe ... rschriften

/edit: Well, I'm a moron. You told me to use <table class=""> and i switched between id and style like 10 times. :D

Thank you for your help.

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: Responsive tables

Post by cmb » Fri Apr 14, 2017 10:10 am

wbs wrote:Ok, so I need to put a table.specialtablestyle before all the lines that produce after and before-content?
Indeed, CSS is rather verbose in this regard. You may consider using a CSS preprocessor, for instance, LESS which offers nesting.
Christoph M. Becker – Plugins for CMSimple_XH

wbs
Posts: 122
Joined: Sun Apr 02, 2017 8:05 am

Re: Responsive tables

Post by wbs » Fri Apr 14, 2017 10:27 am

Thanks, it's only for seven entries, so I guess I'm fine with doing it manually. It's amazing how long it took me because I didn't set table class at my first 300 tries. :D

Post Reply