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.