News: TinyPortal Release Schedule. Please read this update for More Info.

Login  |  Register
HTML5 Icon HTML5 Icon
TP on Social Media
Welcome, Guest. Please login or register.
Did you miss your activation email?

August 21, 2019, 06:23:37 PM

Login with username, password and session length

Recent

Members
  • Total Members: 3751
  • Latest: tom888
Stats
  • Total Posts: 188690
  • Total Topics: 20745
  • Online Today: 102
  • Online Ever: 629
  • (November 08, 2018, 01:36:54 PM)
Users Online
Users: 0
Guests: 37
Total: 37

Author Topic: Responsive Article Tables  (Read 1819 times)

0 Members and 1 Guest are viewing this topic.

Offline mythus

  • Jr. Member
  • **
  • Posts: 17
Responsive Article Tables
« on: March 12, 2017, 09:05:18 AM »
Here's some very simple table tricks for you.

Sometimes when making informational articles with the amazing TinyPortal, you will want to theme them up and make them responsive so that they can be viewed easily on mobile devices. This little guide will show you how to do that.

Making Tables Responsive
Lets do the easy thing first, making tables responsive. Simply put the following right above your table:
Code: [Select]
<div style="overflow-x:auto;">

Put your table here and then close the div.

Code: [Select]
</div>
Now, when viewing a large wide table on your smartphone, instead of squishing the table or making the table break past the boundaries of the screen and difficult to read, it will make the table scrollable. You can now scroll the table left and right.

Theming Tables
This next part will discuss the fact that by default the table will look however the site theme wants the table to look. Oftentimes this is without borders or cell coloring. If you try to alter the css for tables it will alter all tables, including the forums which are, in many themes, tables.

Well you can get around that by simply making a new class. For my needs, I called the class wikitable, but you can call it whatever you need. Here's the code I used, feel free to adapt it to your needs (change colors, etc)...

Code: [Select]
.wikitable tbody tr:nth-child(odd) {
  background: #F1EED5;
}

.wikitable th {
  font-weight: bold;
  background: #CAC28C;
}

This should go at the bottom of the index.css file for your theme. This basically alternates the row colors for your table. Adjust the background: property to whatever color you desire.

The following bit of code makes the rows highlight when you hover over them. I didn't use the .wikitable class for this because I wanted all of my tables to have this effect, however if you want to keep it just on your article tables simply add the .classname in front of the property.

Code: [Select]
tbody:hover td[rowspan], tr:hover td {
  background: #BFE2F9;
}

Now, whenever you add your tables in your articles, make sure you go into html view and do the following

Code: [Select]
<table class="classname"

for each table. For my example I used...

Code: [Select]
<table class="wikitable" border="1px solid" width="100%">

The "border=" bit is to give the table a border. The width bit is to make the table always span the width of your article. DOn't worry, the overflow bit showed earlier will work well with this.

In order to ensure that your table cells and rows have a border you might need to add the following to the bottom of your theme's index.css file. Again I used the class name .wikitable here, substitute that with your class name.

Code: [Select]
.wikitable tbody {
border: 1px;
}

.wikitable table, th, td {
border: 1px solid black;
}

I do hope this was helpful for some of you. I imagine many of you great themers already know all of this. For those that don't, don't be afraid of CSS, you can do a lot with it.