HTML Table: THEAD width depending on TBODY in Chrome

milesbuffalo

New Member
After some testing i've found that Chrome doesn't calculate the THEAD column width depending on the TBODY elements, as Opera does. Is there a way to avoid specifying this in the thead? Example:\[code\]<!DOCTYPE html><html><head> <style type="text/css" media="all"> table{ width:800px; border:1px solid #CCCCCC; table-layout: fixed; border-spacing:0px; box-sizing: border-box; } table td.option{ width:100px; } table td { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border:1px solid #EEEEEE; } table td.active{ text-align:center; width:100px; } td.thead{ /* something that makes that width: is depending on the total width of the tbody elements */ } table td.nonfixed{ width:100%; } </style> <title>Untitled</title></head><body><table> <thead> <tr> <td class="thead">Name</td> <td class="thead">Description</td> <td class="thead">Active</td> <td class="thead" colspan="2">Options</td> </tr> </thead> <tfoot> <tr> <td colspan="100"><a href="">+ Add new row</a></td> </tr> </tfoot> <tbody> <tr> <td class="nonfixed">[Name 1]</td> <td class="nonfixed">[Description 1]</td> <td class="active">[X]</td> <td class="option">Edit</td> <td class="option">Delete</td> </tr> <tr> <td class="nonfixed">[Name 2]</td> <td class="nonfixed">[Description 2]</td> <td class="active">[0]</td> <td class="option">Edit</td> <td class="option">Delete</td> </tr> </tbody></table></body></html>\[/code\]
 
Back
Top