Menu
A little background, I am trying to implement the minimal amount of pieces of this to get fixed report headers from this demo: http://www.imaputz.com/cssStuff/bigFourVersion.html
I have it working except none of my headers rows (i havemultiple header rows) line up vertically with the cells below. I have set the width of all cells to the same with this css:
td { width: 100px; } th { width: 100px; } And changing the th width does have an impact, but for some reason they are not getting a width of 100 pixels. From header row to header row the widths are different for some reason. How can I force all the cells to the same width?
Below is the rest of the CSS that is in place. I am testing with firefox and trying to get the frozen headers to work with as little CSS. Some of the CSS in the linked example is very specific to that layout, and I am trying to work something out that will work with any editing for varying numbers of columns/rows. It currently is working with the exception that the cells are not all aligned.
#reportPlace table thead tr { display: block; } #reportPlace table tbody { display: block; height: 262px; overflow: auto; } NOTE: If I remove both display: block styles it fixes the issue with the column widths, but then the header rows are no longer frozen.
Fired it out part way. I set block display on the entire table, instead of on each th element and and body, and now all the columns line up. Because each th row in the multiple row header had block set seperately, they were autosizing width independently. However, the width setting is still ignored and I'm gonna need that to format the report.
#reportPlace table /*thead tr*/ { display: block; } #reportPlace table tbody { /* display: block;*/ height: 262px; overflow: auto; } Sample HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Page</title> <link href="StyleSheet.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="reportPlace"> <table border="0"> <thead> <tr class="fixedHeader"> <th class="titleAllLockedCell"> <span> </span> </th> <th class="titleTopLockedCell"> <span>Fruits</span> </th> <th class="titleTopLockedCell"> <span>Vegitables</span> </th> </tr> <tr class="fixedHeader"> <th class="titleAllLockedCell"> <span> </span> </th> <th class="titleTopLockedCell"> <span>Original</span> </th> <th class="titleTopLockedCell"> <span>Original</span> </th> </tr> <tr class="fixedHeader"> <th class="titleAllLockedCell"> <span> </span> </th> <th class="titleTopLockedCell"> <span>2009</span> </th> <th class="titleTopLockedCell"> <span>2009</span> </th> </tr> </thead> <tbody> <tr> <td class="titleLeftLockedCell"> <span>1-02</span> </td> <td class="valueCell"> <span>65412 </span> </td> <td class="valueCell"> <span>16542 </span> </td> </tr> <tr> <td class="titleLeftLockedCell"> <span>1-03</span> </td> <td class="valueCell"> <span>456052 </span> </td> <td class="valueCell"> <span>1654652 </span> </td> </tr> <tr> <td class="titleLeftLockedCell"> <span>1-04</span> </td> <td class="valueCell"> <span>564654 </span> </td> <td class="valueCell"> <span>654654 </span> </td> </tr> </tbody> </table> </div> </body> </html> 
206
To set the table width in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <table> tag, with the CSS property width.
By using CSS, the styling of HTML elements is easy to modify. To fix the width of td tag the nth-child CSS is used to set the property of specific columns(determined by the value of n) in each row of the table.
To set the cell width and height, use the CSS style. The height and width attribute of the <td> cell isn't supported in HTML5. Use the CSS property width and height to set the width and height of the cell respectively.
You can try table-condensed class in your table. The . table-condensed class makes a table more compact by cutting cell padding in half. This is a quick solution.
I needed to use the min-width:100px style instead of the width style.
Other issues I've found since include requiring CSS table { table-layout: fixed; width:100%; } as tables require a width be set for the columns to respect width.
Having a first row which contains any colspan can also be an issue, so I include an additional row as the first row which has no border and 0 height(essentially invisible) and has individual cells(no colspans) so that widths can be established by that first "fake" row, and then the second row with colspan's doesn't cause an issue. Note that you shouldn't 0 out the padding/margin as you'd want that first row to have the same as other rows so that widths are properly established:
<tr class='scaffolding'>...</tr> tr.scaffolding, .scaffolding td { border:none; padding-top:0; padding-bottom:0; height:0; margin-top:0; margin-bottom:0; visibility:hidden; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
