使用 HTML 嵌套表格答案

【问题标题】：Nesting Tables Using HTML使用 HTML 嵌套表格
【发布时间】：2014-05-03 23:10:47
【问题描述】：

我正在尝试将两个表嵌套在另一个表中（这样它们会并排显示，一旦我有足够的信息可以添加第三个。）“Sam 的绘画价格表”出现了没有问题，CSS 完整且适当对齐。我试图嵌套在较大表的第二个单元格中的第二个表没有。相反，它显示在第一个嵌套表下方。我不知道为什么。我在这里查看了几个线程，但每个人都在说“不要嵌套表格”......所以我试着不嵌套它们。但它们仍然不会并排显示。这是我所拥有的：

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

如果相关，这里是 CSS 的“定价表”部分。

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

【问题讨论】：

看到我在发帖后就忘记了。刚刚完成编辑。
你必须把另一张桌子放在桌子里面..现在你必须分开桌子
我将它们分开以尝试让它们并排显示。此版本的唯一视觉差异是顶部表格和底部表格之间存在中断。
然后使用css table{width:45%;float:left;}

标签： html css html-table nested

【解决方案1】：

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

【讨论】：

丹吉特。我发誓我试过了。当我这样做时，我一定错过了某个地方的标签。谢谢您，将完整创建的表格放入每个部分都有效。
太棒了，是的，保持简单：P
您应该将此帖子标记为正确答案以遵循堆栈溢出标准
只是在等待它让我。需要十分钟，而且我还得做晚饭。现在接受。 ;)
甜...哈哈你也是..在这里做意大利面XD

【解决方案2】：

您几乎可以通过两种方式做到这一点。通过内联块（制作一个像 div 一样的元素来包围它们并给它一个内联块，创建一个彼此相邻的内联元素）或者让它们专门左右浮动。

<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 的描述将它们简单地放在外部表中。

【讨论】：