MyBB Community Forums
[MyCode] Customised and mobile friendly Table tag - Printable Version

+- MyBB Community Forums (https://community.mybb.com)
+-- Forum: Resources (https://community.mybb.com/forum-8.html)
+--- Forum: MyCodes (https://community.mybb.com/forum-117.html)
+--- Thread: [MyCode] Customised and mobile friendly Table tag (/thread-231226.html)

[MyCode] Customised and mobile friendly Table tag - Loller Corleone - 2021-02-13

This is a MyCode table that will give your forum a good looking table with alternated rows that will become scrollable on mobile devices, without breaking your responsive theme.

MyCode

Table:
Regular Expression:
\[table\](.*?)\[/table\]

Replacement:
<div class="tablescroll">
<table class="styled-table">$1</table>
</div>

Table Row:
Regular Expression:
\[tr\](.*?)\[/tr\]


Replacement:
<tr class="styled-tr">$1</tr>

Table Header:
Regular Expression:
\[th\](.*?)\[/th\]

Replacement:
<th class="styled-thead">$1</th>

Table Data:
Regular Expression:
\[td\](.*?)\[/td\]

Replacement:
<td class="styled-td">$1</td>

CSS
Add the following in global.css

/* Table tag modifications */
.tablescroll {
  overflow-x: auto; /* Horizontal */
}

.styled-table {
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.9em;
    font-family: sans-serif;
    min-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.styled-thead {
    background-color: #068080;
    color: #ffffff;
}

.styled-thead,
.styled-td {
    padding: 12px 15px;
}

.styled-tr {
    border-bottom: 1px solid #dddddd;
}
.styled-tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

.styled-tr:last-of-type {
    border-bottom: 2px solid #068080;
}

You can change the color hex codes according to your theme's color scheme.

Preview:
[Image: G6bEr.png]

Alternate CSS for dark themes:
.tablescroll {
  overflow-x: auto; /* Horizontal */
}

.styled-table {
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.9em;
    font-family: sans-serif;
    min-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.styled-thead {
    background-color: #0066a2;
    color: #ffffff;
}

.styled-thead,
.styled-td {
    padding: 12px 15px;
}

.styled-tr {
    border-bottom: 1px solid #6e6e6e;
}
.styled-tr:nth-of-type(even) {
    background-color: #222;
}

.styled-tr:last-of-type {
    border-bottom: 2px solid #0066a2;
}

Dark theme table preview:
[Image: G6faG.png]

RE: [MyCode] Customised and mobile friendly Table tag - DiegoPino - 2021-03-05

Thank you for the tutorial

work perfect Angel

RE: [MyCode] Customised and mobile friendly Table tag - Loller Corleone - 2021-03-07

(2021-03-05, 10:29 PM)DiegoPino Wrote: Thank you for the tutorial

work perfect  Angel
You are welcome!