html - Why doesn't this DIV expand to the width of the children -
i having issue , wondering why containing div not expand width of big table?
<html> <head> <link rel="stylesheet" href="http://www.blueprintcss.org/blueprint/screen.css" type="text/css" media="screen, projection" /> <link rel="stylesheet" href="http://www.blueprintcss.org/blueprint/print.css" type="text/css" media="print" /> <!--[if lt ie 8]><link rel="stylesheet" href="http://www.blueprintcss.org/blueprint/ie.css" type="text/css" media="screen, projection" /><![endif]--> <style type="text/css"> div.add-padding { padding: 15px; background-color: red; } table { background-color: blue; } </style> </head> <body> <div class="add-padding"> <table> <thead> <tr><td>foo</td></tr> </thead> <tbody> <tr><td>bar</td></tr> </tbody> </table> <table> <thead> <tr> <td>seq</td> <td>id</td> <td>parentid</td> <td>case category</td> <td>case #</td> <td>case id</td> <td>account code</td> <td>account code id</td> <td>trans date</td> <td>person id</td> <td>fullname</td> <td>suffix</td> <td>payeeid</td> <td>operatorid</td> <td>notes</td> <td>checkid</td> <td>receiptid</td> <td>void</td> <td>transcategoryid</td> <td>casefull</td> <td>transtypeid</td> <td>xfer to</td> <td>ref #</td> <td>view amount</td> </tr> </thead> <tbody> <tr> <td>foo_bar</td> <td>foo_bar</td> <td>foo_bar</td> <td>foo_bar</td> <td>foo_bar</td> <td>foo_bar</td> <td>foo_bar</td> <td>foo_bar</td> <td>foo_bar</td> <td>foo_bar</td> <td>foo_bar</td> <td>foo_bar</td> <td>foo_bar</td> <td>foo_bar</td> <td>foo_bar</td> <td>foo_bar</td> <td>foo_bar</td> <td>foo_bar</td> <td>foo_bar</td> <td>foo_bar</td> <td>foo_bar</td> <td>foo_bar</td> <td>foo_bar</td> <td>foo_bar</td> </tr> </tbody> </table> </div> </body> </html>
not 100% sure want, try this:
- you should add
<!doctype html>
(the html5 doctype) first line (you must escape quirks mode , ensure consistent rendering between different browsers). - add
float: left
div.add-padding
.
Comments
Post a Comment