Digital design and other shiny toys

Improving table display in ebooks with responsive design

Posted on by Paul

Displaying tables in ebooks is like designing for mobile devices in that we don’t always know the display size. Data tables that work well on an iPad or Kindle Fire will become unreadable on a smaller device such as an iPhone.

I recently completed three ebooks containing multi-column data tables. The client was keen to make these readable on small displays so I borrowed some responsive design techniques from my web development work.

HTML

First I created the tables using standard HTML:

<table>
<thead>
<tr>
<th>Product Name</th>
<th>Product Type</th>
<th>Product Code</th>
<th>Width</th>
<th>Height</th>
<th>Weight</th>
<th>Colour</th>
<th>Price</th>
<th>Shipping Options</th>
<th>In Stock</th>
</tr>
</thead>

<tbody>
<tr>
<td data-title="Product Name">SP56</td>
<td data-title="Product Type">Sprocket</td>
<td data-title="Product Code">GJ903</td>
<td data-title="Width">45mm</td>
<td data-title="Height">50mm</td>
<td data-title="Weight">600g</td>
<td data-title="Colour">n/a</td>
<td data-title="Price">£5.00</td>
<td data-title="Shipping Options">Standard</td>
<td data-title="In Stock">y</td>
</tr>

</tbody>
</table>

Note the data-title attributes on the td elements. We’ll come back to them in a moment.

CSS

Then I styled the table as normal using CSS:

table {
margin: 1em 0 2em 0;
border-collapse: collapse;
border: solid 2px #000;
page-break-inside: avoid;
}
table tr {
border-bottom: solid 1px #000;
}
table th, table td {
text-align: left;
margin: 0;
padding: 0.2em 0.5em;
vertical-align: top;
}
table th {
background-color: #000;
color: #fff;
font-weight: bold;
}

Nothing out of the ordinary here. We end up with this:

HTML table

This works on wide displays but on a small device we get this:

HTMl table in iPhone 1

Turning the device on its side helps, but it’s still hard to read and content is clipped:

HTML table on iPhone 2

Media Queries

Using media queries we can detect smaller displays and give them custom CSS to restyle the table:

<link href="../Styles/small_display.css" media="only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px)" rel="stylesheet" type="text/css" />

Smaller devices get the following extra CSS:

table, table thead, table tbody, table tr, table th, table td {
display: block;
}
table {
border: none 0;
font-size: 90%;
}
table thead, table tr.sub_header {
display: none;
}
table tr {
border-bottom: solid 1px #000;
}
table tr:nth-child(even) {
background: #eee;
}
table td {
border-bottom: solid 1px #000;
position: relative;
padding-left: 50%;
white-space: normal;
text-align: left;
}
table td:before {
position: absolute;
top: 0.5em;
left: 0;
width: 48%;
white-space: nowrap;
text-align:left;
font-size: 80%;
font-weight: bold;
content: attr(data-title) ": ";
}

This turns the table rows, headers and cells into block level elements so they are shown on separate lines, restyled to suit. However, the clever part is the table td:before selector which takes the value of each td element’s data-title attribute and adds it to the page. Now each table cell has a label:

HTML table on iPhone 3

HTML table on iPhone 4

It’s now easier to read the table data on a small display. However, it’s not perfect because the information is spread across multiple pages, making it harder to compare table rows. Also, the table cell labels do not wrap, so very long ones will overlap the content that follows.

Of course, we’re also waiting to see if the ebooks are accepted. Using data- attributes might invalidate them. Also, it doesn’t work in iBooks on the Mac.

It’s possible to implement this on the Kindle too. In the media query replace only screen with amzn-kf8 to limit the CSS rules to newer devices such as the Kindle Fire. (Older Kindle devices will simply hide the table if you allow them to apply the CSS.)

<link href="../Styles/small_display.css" media="amzn-kf8 and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px)" rel="stylesheet" type="text/css" />

You could also apply this technique to tables with a specific CSS class for extra control.

There’s lots of information about this topic online. I found these articles particularly helpful:

UPDATE: The ebook was approved by Apple, so looks like it’s okay to use media queries in this way. I also heard from another developer who tried this technique that her ebook was accepted by Amazon.

Comments are closed.

Read the comments policy