css - HTML: How to increase width of table columns when the table is inside a div with fixed width -
the following piece of html code creates table inside div of fixed width. seems "th,td" width inherited parent div (but w3 documentation says not inherited property!).
how increase width of table columns (say 500px)?
you can see changing width value in "th, td" selector not have impact on width.
please note:
- not want change width of div
- not want set fixed width table
- have tried "table-layout: fixed;" inside table selector. did not make "td,th" width property work.
<!doctype html> <html> <head> <style> table { border-collapse:collapse; } table, td, th { border:1px solid black; } th, td { /* changing width doesn't make difference */ width:500px; } .myclass { width:200px; overflow:auto } </style> </head> <body> <div class="myclass"> <table> <tr> <th>firstname</th> <th>lastname</th> <th>savings</th> <th>expenditure</th> </tr> <tr> <td>peter</td> <td>griffin</td> <td>$100</td> <td>$50</td> </tr> </table> </div> </body> </html>
why not use percentages?
jsfiddle: http://jsfiddle.net/qcydq/
also limiting 200px in width, if text inside table (word width) larger 200px force width , cause scroller appear table stretch fit words.
<!doctype html> <html> <head> <style> table { border-collapse:collapse; width: 100%; font-size: 9px; } td,th { border:1px solid black; width: 25%; } .myclass { width:200px; overflow:auto } </style> </head> <body> <div class="myclass"> <table> <tr> <th>firstname</th> <th>lastname</th> <th>savings</th> <th>expenditure</th> </tr> <tr> <td>peter</td> <td>griffin</td> <td>$100</td> <td>$50</td> </tr> </table> </div> </body> </html>
Comments
Post a Comment