demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Package Manufacturer Name Speed Cores Cache Price
AMD Opteron 6172 Twelve-Core 2.1GHz w/ 18MB Cache AMD Opteron 6172 2.1 GHz 12 18 MB $1,199.99
Intel Core™ i7-3960X Processor Extreme Edition 3.30GHz w/ 15MB Cache Intel Core i7-3960X 3.3 GHz 6 15 MB $1,049.99
Core™ i7-990X Processor Extreme Edition 3.46GHz w/ 12MB Cache Intel Core i7-990X 3.46 GHz 6 12 MB $899.99
Opteron 6168 Twelve-Core 1.9GHz w/ 18MB Cache Intel Opteron 6168 1.9 GHz 12 18 MB $849.99
Opteron 6134 Eight-Core 2.3GHz w/ 12MB Cache AMD Opteron 6134 2.3 GHz 8 12 MB $619.99
Core i7-3930K Processor, 3.20GHz w/ 12MB Cache Intel i7-3930K 3.2 GHz 6 12 MB $569.99

Make A Scrolling, Fade-In Shopping Table

css / tables

Estimated reading time: 1 minute, 45 seconds

Allowing elements to scroll inside a browser viewport is generally a bad design decision: users are likely to confuse the scrollbars on the inner element and the browser viewport, slowing speed and usability.

However there are rare occasions when scrolling might be considered for HTML elements. One such scenario is a shopping table, in which products or services with small but important distinctions are presented in rows.

In a future article, I’ll show you how to use JQuery to “stick” ; rows in the table, allowing easy comparison between products. In this section, I’ll present the markup and CSS for the table.

The code is fairly straightforward: a table header section (<thead>) with column headings, table body (<tbody>) containing the table data (different computer processors, in this case) and a table footer (<tfoot>). Rather oddly, the table footer is placed before the body in the code, but automatically appears underneath it in the browser. In this example, there is no data in the table footer, and its role is purely presentational.

<table>
<thead>
<tr>
<th>Package<th>Manufacturer<th>Name<th>Speed<th>Cores<th>Cache<th>Price
<tfoot>
<tr><td colspan=6>
<tbody>
<tr>
<td><img src=amd-opteron.jpg alt="AMD Opteron 6172 Twelve-Core 2.1GHz">
<td>AMD<td>Opteron 6172<td>2.1 GHz<td>12<td>18 MB<td>$1,199.99
<tr>
<td><img src=i7-3960X.jpg alt="Intel Core i7-3960X Processor">
<td>Intel<td>Core i7-3960X<td>3.3 GHz<td>6<td>15 MB<td>$1,049.99
</table>

The table header and footer both contain vertical gradients, white to transparent (reversed in the footer). The secret to getting the tbody element to scroll vertically is fourfold:

  1. Set the <tbody> to display: block;
  2. Constrain it to a specific height;
  3. Set overflow to auto;
  4. Hide the excess with overflow-x

The complete CSS code, albeit without vendor prefixes for the linear gradients:

table { border-collapse: collapse; box-sizing: border-box; }
td img { width: 100px; height: 100px; }
table, thead, tbody { display: block; position: relative; }
thead, tbody, tfoot { width: 700px; }
th, td { padding: 1.2rem; }
thead { background-image: linear-gradient(rgba(255,255,255,1) 70%, rgba(255,255,255,0)); z-index: 2; }
tbody { height: 270px; overflow: auto; overflow-x: hidden; margin-top: -20px; }
tfoot { background: linear-gradient(rgba(255,255,255,0) 30%, rgba(255,255,255,1));  position: absolute; bottom: 0; height: 20px; z-index: 3; }

The tbody is also given relative position in order to raise it under the table header element; the footer is absolute so that it can be placed on top of the tbody.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.