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.

live demo


Comments

Popular posts from this blog

python - Scipy curvefit RuntimeError:Optimal parameters not found: Number of calls to function has reached maxfev = 1000 -

c# - How to add a new treeview at the selected node? -

java - netbeans "Please wait - classpath scanning in progress..." -