[MyCode] Customised and mobile friendly Table tag
#1
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]
Reply
#2
Thank you for the tutorial

work perfect Angel
Reply
#3
(2021-03-05, 10:29 PM)DiegoPino Wrote: Thank you for the tutorial

work perfect  Angel
You are welcome!
Reply


Forum Jump:


Users browsing this thread: 2 Guest(s)