CMSimple_XH–Forum

Posted: **Thu Apr 13, 2017 9:30 pm**

I'm using following css for responsive tables

/* 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

Posted: **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).

Posted: **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.

Posted: **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 */}

Posted: **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.

Thank you for your help.

Posted: **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.

Posted: **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.

CMSimple_XH–Forum

Responsive tables

Responsive tables

Re: Responsive tables

Re: Responsive tables

Re: Responsive tables

Re: Responsive tables

Re: Responsive tables

Re: Responsive tables