HTML5, CSS3, and JavaScript Fourth Edition

(Ben Green) #1

CHAPTER 16. TABLES 171


overflow: scrollis another option. It adds a horizontal scroll bar to let
the user see the hidden content.


We may want to clip the content normally, but display it when the user
expresses interest by hovering the mouse over the cell. This can be achieved
in at least two ways. One is to use a title= attribute and repeat the content.
That seems like a lot of work but it solves the problem. Another way is to use
the :hover pseudo-class to restyle the cell, removing the nowrap attribute.
This allows the content to use as many lines as needed, but only when the
user hovers over the content. If more lines are used, then the page is reflowed,
which can be annoying.


th:hover, td:hover { white-space: normal; }


16.10 For Further Study


http://www.w3.org/wiki/Styling_tablestells how to style tables.


http://www.w3schools.com/cssref/css3_pr_transform.aspexplains more
about the transform attribute.

Free download pdf