• Standards Mode causes the W3C Box Model, which may affect any width declarations you make in CSS (Width excludes padding, border, and margins). Learn more about Box Models.

• Standard, No Perks
• Scrolling
• Nested Column Headers
• Sorting
• Scrolling and Nested Column Headers
• Scrolling and Sorting
• Nested Column Headers and Sorting
• Scrolling, Nested Column Headers, and Sorting

Each table column is set to a fixed width of 100px. The table itself does not have a width. Toggle a table width of 700px. Note that (in Firefox) the examples that do not include the scrolling feature will automatically expand the columns to fit the width of the table.

CSS Change #1:
.yui-dt-scrollable { _width:436px; _height:160px; }

• When setting the width of your table, only set the value in IE so that your column headers will line up in Firefox correctly.
• Depending on your box model, make sure to add into the width any left or right padding or margins you've added to the table cells. I added 5px padding to the left of each cell, so with 4 cells at 100px (+5px) each, that's a total width of 420px. To make it as accurate as possible, you will also have to add in the width of the scrollbar, which on Windows IE6 seems to be 16px (436px total).
• When setting the height of your table, only set in IE. You may set the .yui-dt-scrollbody height in Firefox, but setting the .yui-dt-scrollable height causes the table body to give unexpected results with the div expanding too far below it's desired height.

CSS Change #2:
.yui-dt-table th, .yui-dt-table td { vertical-align: top; }
.yui-dt-table thead { background-color:#933; }

• When using Nested Column Headers and Scrolling, IE was causing the bottom half of the header text to be cut off.
• When setting a background color for the header, assign it to the thead element, not th elements.