Set a Mobile Table
I’m building a book page for my blog. I decided to make it a table so that I can copy the information to excel if needed.
1. Make it adaptive for mobile devices
1 |
|
We can set percentage of width for mobile devices.
<table style="table-layout: fixed;" border="1" width="100%" cellspacing="0" cellpadding="2">
For other devices, we can use fixed width.
<table style="height: 125px;" border="1" width="640" cellspacing="0" cellpadding="2">
2. Make the columns easy to copy
We can use style="vnd.ms-excel.numberformat:@"
in each <td>
tag.
For example,<td style="vnd.ms-excel.numberformat:@">The Daughter of Time</td>
.
3. Make the color fits both day and night modes
I’m using white font for all fonts. So the table can only be seen in night mode. Still working on it.
<table class="ui stackable responsive celled padded compact small table" style="color:white; " border="1" width="100%" cellspacing="0">
============
01.24 update
While style="color:white; "
could set the color of the text in the table, we need two modes based on the fluid theme.
I add the following function in /blog/themes/fluid/source/js/color-schema.js
. And call this function in applyCustomColorSchemaSettings()
.
1 |
|
Then write a simple css file for light and dark modes.
1 |
|
Mission accomplished.
