MyBB Community Forums

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:

---

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:

Thank you for the tutorial

work perfect

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

work perfect 

You are welcome!