CHAPTER 16. TABLES 166
We may also be able to use the writing-mode: property that allows us to
specify whether writing is top to bottom and left to right or some other
sequence. This might be handy for arabic (right to left) or chinese (top to
bottom).
If we want horizontal letters, one letter per line, we can try something like
this, which acts like putting
after every letter.
{ width: 1px; word-wrap: break-word; text-align: center; }
Another option is to create an image, which would give us complete control,
but that just seems wrong because we freeze everything and destroy copy-
paste. It is much better to use actual text instead of an image if we can.
16.5 Controlling Width
Cell widths are usually decided by the browser depending on the content
that is present. Usually the browser tries to minimize the overall length of
the table.
Because the browser automatically takes control of sizing, things likemin-
width: andmax-width: andmin-height: andmax-height: apply to
many parts of a webpage, but theynormallydo not work on table cells.
Exam Question 300(p.354): Does max-width: normally work with table
cells?
Required Answer:no
This can be frustrating. But there is a solution. Simply take away the
browser’s right to adjust cell widths by using the table-layout: fixed at-
tribute.
table { table-layout: fixed; }
Exam Question 301(p.354): List the two “table-layout:” options.
Required Answer:auto, fixed
With auto, which is the default, we get the normal behavior with the browser
setting widths by the widest unbreakable content it finds. With fixed the
width is determined by the first row of the table and is not changed by later
content. This makes layout faster and more consistent for settings where
data may change from time to time.