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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<div>Book Table</div>

<table style="table-layout: fixed;" border="1" width="100%" cellspacing="0" cellpadding="2">

<tbody>

<tr>

<th style="text-align: left;">Book</th>

<th style="text-align: left;">Author</th>

<th style="text-align: left;">Rating</th>

<th style="text-align: left;">Comment</th>

<th style="text-align: left;">Title</th>

</tr>

<tr>

……

</tr>

</tbody>

</table>

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function getTableColor() {
var colorTable = document.getElementById('table1011'); //mine
var currentSetting = getLS(colorSchemaStorageKey); // get current color setting
console.log(currentSetting);
console.log("running"); // for testing
// when table exists
if (colorTable != null) {
// when current setting is light
if (currentSetting == "light") {
colorTable.style.color = "black";
colorTable.classList.remove("dark-table"); // remove dark mode tag
colorTable.classList.add("day-table"); // add light mode tag
} else {
colorTable.style.color = "white";
colorTable.classList.remove("day-table");
colorTable.classList.add("dark-table");
}
} else {
return;
}

}

Then write a simple css file for light and dark modes.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.day-table a {
color: #665d25;
text-decoration:underline;
}

.day-table a:hover {
color: #8e916d;
}


.dark-table a {
color:#C7EDCC;
text-decoration:underline;
}

.dark-table a:hover {
color: #b6c29a;
}

Mission accomplished.


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!