使用HTML嵌套表格 [英] Nesting Tables Using HTML

问题描述

我正在尝试将两个表嵌套在另一个表中(这样它们将并排显示，一旦我有足够的信息就可以添加第三个表.)显示"Sam的绘画价格表"没问题，CSS完好无损并适当对齐.我要嵌套在较大表的第二个单元格中的第二个表没有.相反，它显示在第一个嵌套表的下方.我不知道为什么.我看过这里的几个线程，但是每个人都在说不要嵌套表" ...所以我尝试不嵌套它们.但是它们仍然不会并排显示.这就是我所拥有的:

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>

在适当的情况下，这是CSS的定价表"部分.

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

推荐答案

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

这篇关于使用HTML嵌套表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！