Question

我试图在另一张桌子中嵌入两张桌子（所以他们会并排显示，一旦我有足够的信息，我可以添加第三张。）＆＃34;萨姆的绘画价格表＆＃34;显示没有问题，CSS完整和适当对齐。我试图在较大的表的第二个单元格中嵌套的第二个表没有。相反，它显示在第一个嵌套表的下方。我无法弄清楚原因。我已经在这里查看了几个主题，但是每个人都只是在说＃34;不要在桌子上筑巢＆＃34; ...所以我试着不嵌套它们。但他们仍然不会并排展示。这就是我所拥有的：

<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>

如果它是相关的，那么＆＃34; pricingTable＆＃34; CSS的一部分。

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

Answer 1

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

Answer 2

你几乎可以做两种方式。通过Inline块（使div成为一个elemenent来包围它们并给它一个内联块，创建一个彼此相邻的内联元素）或者让它们特定地左右浮动。

<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;
        }

请参阅此处的小提琴：http://jsfiddle.net/SM769/

此外，您可以将它们简单地放在外表中，如Medda86所述。

使用HTML嵌套表

2 个答案: