Tables in ePub: CSS

virtual_ink · 02-16-2012, 12:26 AM

I'm exploring the possibilities of formatting tables with CSS/XHTML. I'm sure there will be a few questions as I go, but right now I'm wondering:

Can you control the length of a particular column? I'd like 'column one' to be 75%, and 'column two' to be 25% of the page width.

virtual_ink · 02-16-2012, 12:55 AM

Second question: Is it possible to ensure table stays on one page? They look terrible when split over two pages.

Toxaris · 02-16-2012, 03:52 AM

It is quite easy to fix the width of a column to a fixed percentage. If it only two columns, you only need to specify one.

Code:

.colw {
width: 75%;
}

and in HTML:

Code:

<table width=100%>
<tr>
<td class="colw">75%</td>
<td>the rest...</td>
</tr>
</table>

Keeping the table on one page is difficult. You could try something with page-break-avoid, but than it must fit on a page. With the different zoomlevels, that is hard to control.

virtual_ink · 02-16-2012, 09:13 PM

Thanks for the helpful tips Toxaris. Good point re zoomlevels vs pagebreaks.

KLUTCH · 02-23-2012, 12:07 PM

I would recommend dropping the font size to keep it on one page, looks much better on the kindle

Toxaris · 02-23-2012, 03:51 PM

Quote:

Originally Posted by KLUTCH

I would recommend dropping the font size to keep it on one page, looks much better on the kindle

Since Kindle does not support ePUB, that is not a real issue.

Anyway, fontsize is a little tricky. There are different sizes of readers with different resolutions, so which fontsize to choose?
Also, some people want to enlarge the font so they are able to read it. That will definitely break your page. I really dislike fixed fontsizes.

02-16-2012, 12:26 AM	#1
virtual_ink Zealot Posts: 107 Karma: 1000 Join Date: Sep 2010 Location: Melbourne, Australia Device: iPad2, Kindle	Tables in ePub: CSS I'm exploring the possibilities of formatting tables with CSS/XHTML. I'm sure there will be a few questions as I go, but right now I'm wondering: Can you control the length of a particular column? I'd like 'column one' to be 75%, and 'column two' to be 25% of the page width.

02-16-2012, 03:52 AM	#3
Toxaris Wizard Posts: 4,520 Karma: 121692313 Join Date: Oct 2009 Location: Heemskerk, NL Device: PRS-T1, Kobo Touch, Kobo Aura	It is quite easy to fix the width of a column to a fixed percentage. If it only two columns, you only need to specify one. Code: .colw { width: 75%; } and in HTML: Code: <table width=100%> <tr> <td class="colw">75%</td> <td>the rest...</td> </tr> </table> Keeping the table on one page is difficult. You could try something with page-break-avoid, but than it must fit on a page. With the different zoomlevels, that is hard to control. Last edited by Toxaris; 02-16-2012 at 03:58 AM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Override ePub CSS with userStyle.css?	barium	Sony Reader Dev Corner	11	07-16-2011 04:25 PM
ePub to Mobi issues with tables	apastuszak	Conversion	11	06-20-2011 10:19 PM
HTML tables truncating after converting to epub	SEI Publications	Conversion	7	05-06-2011 07:53 PM
Classic Nook Crashes on Loading Tables in Converted EPUB	nulall	Barnes & Noble NOOK	3	02-01-2011 08:58 AM
Converting Word Doc with Tables to Epub?	dhume01	ePub	8	12-28-2010 09:02 PM

02-16-2012, 12:55 AM	#2
virtual_ink Zealot Posts: 107 Karma: 1000 Join Date: Sep 2010 Location: Melbourne, Australia Device: iPad2, Kindle	Second question: Is it possible to ensure table stays on one page? They look terrible when split over two pages.

02-16-2012, 09:13 PM	#4
virtual_ink Zealot Posts: 107 Karma: 1000 Join Date: Sep 2010 Location: Melbourne, Australia Device: iPad2, Kindle	Thanks for the helpful tips Toxaris. Good point re zoomlevels vs pagebreaks.

02-23-2012, 12:07 PM	#5
KLUTCH Enthusiast Posts: 29 Karma: 22 Join Date: Oct 2010 Location: London Device: Kindle, iPad, iPhone 4, HTC Desire	I would recommend dropping the font size to keep it on one page, looks much better on the kindle

Advert

Advert