Nesting Tables Using HTML

问题

I'm trying to nest two tables inside of another table (so they'll display side by side, and I can add a third once I have enough information to do so. ) The "Sam's Painting Price Schedule" shows up without a problem, CSS intact and appropriately aligned. The second table I'm trying to nest within the second cell of the larger table does not. Instead, it shows up beneath the first nested table. I can't figure out why. I've looked at several threads on here, but everyone just is saying "don't nest tables"... So I tried not nesting them. But they still won't display side by side. Here's what I have:

<table class = "pricingTable" >
<tr>
<th colspan = "2">Sam's Painting<br>Price Schedule</th></tr>
<tr><td  class = "pricingTable">11"x14" </td><td  class = "pricingTable">$40</td></tr>
<tr><td  class = "pricingTable">14"x17" </td><td  class = "pricingTable">$80</td></tr>
<tr><td  class = "pricingTable">16"x20" </td><td  class = "pricingTable">$100</td></tr>
<tr><td  class = "pricingTable">20"x20" </td><td  class = "pricingTable">$120</td></tr>
<tr><td  class = "pricingTable">18"x24" </td><td  class = "pricingTable">$125</td></tr>
<tr><td  class = "pricingTable">20"x32" </td><td  class = "pricingTable">$150</td></tr>
<tr><td  class = "pricingTable">36"x24" </td><td  class = "pricingTable">$200</td></tr>
<tr><th colspan = "2">Bracelets</th></tr><tr>
<td  class = "pricingTable">Simple Bracelet</td><td  class = "pricingTable">$15</td>
</tr></table>

<table class = "pricingTable" ><tr>
<th colspan = "2">Chana's Sewing<br>Price Starter Guide</th>
<tr><td  class = "pricingTable">Cravats </td><td  class = "pricingTable">$20</td></tr>
<tr><td  class = "pricingTable">Bow-ties </td><td  class = "pricingTable">$20</td></tr>
<tr><td  class = "pricingTable">Cuffs </td><td  class = "pricingTable">$30</td></tr>
<tr><td  class = "pricingTable">Skirts </td><td  class = "pricingTable">$35</td></tr>
<tr><td  class = "pricingTable">Bustles </td><td  class = "pricingTable">$40</td></tr>
<tr><td  class = "pricingTable">Coats</td><td  class = "pricingTable">$40</td></tr>
<tr><td  class = "pricingTable">36"x24" </td><td  class = "pricingTable">$200</td></tr>
<tr><td  class = "pricingTable">Tie Tacks</td><td  class = "pricingTable">$10
</td></tr></table>

In case it's pertinent, here's the "pricingTable" portion of the CSS.

.pricingTable
{
    border:2px solid slategrey;
    background-color:#FFFFFF;
    border-collapse:collapse;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 2px;
    padding-right: 2px;
}

回答1:

<table class="outer"><tr>
<td>put table 1 here</td>
<td>put table 2 here</td>
</tr></table>

回答2:

You can pretty much do it 2 ways. By Inline block (make an elemenent like a div to envelop them and give it an inline block, creating an inline element next to each other) or you let them specificly float left and right.

<strong>Using display: inline-block; </strong><br>
    <table border=1 class="inlineTable">
        <tr>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
        </tr>
    </table>
    <table border=1 class="inlineTable">
        <tr>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
        </tr>
    </table>

    .inlineTable {
        display: inline-block;
    }

<strong>Using float: left; </strong><br>
   <table border=1 class="floatedTable">
        <tr>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
        </tr>
    </table>
    <table border=1 class="floatedTable">
        <tr>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
        </tr>
    </table>

        .floatedTable {
            float:left;
        }

See the fiddle here: http://jsfiddle.net/SM769/

Also you can put them simply in an outer table, as described by Medda86.

来源：https://stackoverflow.com/questions/23450785/nesting-tables-using-html

标签

html

css

html-table

nested