It could make sense to break the joined columns across lines for more control over where the content breaks across lines: CityĪdding manual tags is a minor inconvenience in HTML and Markdown, but if it helps reduce table width and doesn't hurt content presentation, it's a good trick for one to keep up one's sleeve. Because the table isn't sortable, it's a simple space-saving solution. In the city table, the highest and lowest temperature columns can be joined to form a "Temperature Range" column. Some tables have columns that can be joined together without losing any information. For tables that do work in this orientation, however, this is an easy way to decrease a table's width, and it works out-of-the-box in Markdown. Not every table will lend itself well to this type of rotation. If we rotate the table so the cities are along the top, we can transform it into a 4x5 table: The cities table above is has 5 columns and 4 rows (5x4). This method works when a table has more columns than it does rows. Let's take the city table and examine two ways to reduce its column count. As a result, removing one column from a table will reduce the width of that table by the width of the column's widest cell, plus its cells' horizontal padding, plus the width of one column border. Every column in a legible table comes with some horizontal padding in its cells and a border separating columns. Mitigation 1: Reduce columnsĪ reliable way to reduce the width of a table is to reduce the number of its columns. The table uses data from the Halifax, San Francisco, and Toronto Wikipedia pages. In this article, we'll apply each strategy to the following table, which in my browser has a max width of 626.2px and a min width of 456.2px: City So, if a table's content is too wide, causing the table to overflow, we really only have three options: If that's too wide, overflow the table's container.If the columns at their max widths are wider than the table, shrink columns to their minimum widths.If there's space left over, distribute it among the columns.Try to fit columns in a table without breaking lines in the column's cells.The algorithm described in the spec is a mouthful-nay, a horse's mouthful. The W3C, the Web standards organization led by Tim Berners-Lee, the inventor of the Internet, describes an algorithm to determine a table's column widths in the "Automatic table layout" section of the CSS 2 Tables spec. What does a pony's butt look like? Hey, now.) (What does a horse's mouth look like? Like a pony's, but bigger. What does that algorithm look like? To answer that question, we'll go straight to the horse's mouth. So, browsers use an automatic table layout algorithm to determine how to render a table's columns and rows. The widths of the table and its cells are adjusted to fit the content. Okay, that may seem obvious, but solving this problem requires an answer to this question: how does a browser calclate a table's width?īy default, most browsers use an automatic table layout algorithm. The reason tables overflow is that they are too wide. Plus, because I write these blog posts in Markdown using a static site generator, I'll comment on how easily each method of reducing overflow works with a Markdown-based static site. This post will cover why tables are overflow-prone before presenting a few methods of making them more responsive. So I got to thinking: what are some ways to make tables more responsive and help prevent those tables from overflowing on smaller screens? (If you're dual-weilding a phone and a tablet, would you tap the screens with your nose?) On tablet (or larger device), in the other hand, that table would look rather handsome. On a phone, in the one hand, that table is bifurcated. Network table without responsive styling: Chrome Here's how the table looked in mobile Chrome: An earlier version of my blog post about how Google Fonts can affect page speed included tabular representations of page loads using different methods of loading Google Fonts, and I just couldn't get it to fit on a phone-sized screen. How to Write Responsive HTML Tables (for Markdown Sites)
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |