How to prevent HTML tables from becoming too wide | 456 Berea Street

How to prevent HTML tables from becoming too wide | 456 Berea Street - 必須設定 table{table-layout:fixed} 才能設定 table-cell的 width & overflow:hidden

Your first instinct is probably to do what I did: start hacking away at the CSS. How about giving overflow:hidden a try? Nope, nothing happens. What if I give the table a different width? No, it doesn’t budge. But there is a solution.

The trick is to use the CSS property table-layout. It can take three values: auto, fixed, and inherit. The normal (initial) value is auto, which means that the table width is given by its columns and any borders. In other words, it expands if necessary.
What you want to use is table-layout:fixed. Bam! Now the table is as wide as you have specified in the CSS. No more, no less. And to my great surprise this seems to be widely supported by browsers. The only browser of any significance that does not support it is IE/Mac, and the significance of that browser is rapidly approaching zero.