使用HTML嵌套表格

我試圖在另一個表格內嵌入兩張表格（所以他們會並排顯示，並且一旦我有足夠的信息就可以添加第三個表格）。「Sam's Painting Price時間表「顯示沒有問題，CSS完好無損並適當對齊。我試圖嵌套在更大表格的第二個單元格中的第二個表格沒有。相反，它顯示在第一個嵌套表下面。我無法弄清楚爲什麼。我已經看過這裏的幾個主題，但每個人都只是說「不要嵌套表」......所以我試圖不嵌套它們。但他們仍然不會並排顯示。下面是我有：使用HTML嵌套表格

<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」部分。

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

來源

2014-05-03 Heather T

你的CSS在哪裏？ – Dorvalla

看到我發佈後我忘了它。剛剛完成編輯。 –

你必須把另一張桌子放在桌子裏面..現在你必須分開桌子 – Medda86

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

來源

2014-05-03 23:15:11 Medda86

Dangit。我發誓我嘗試過。當我做到這一點時，我一定在某個地方錯過了一個標籤。謝謝，接受並將完整創建的表格放入每個部分。 –

真棒，是的，保持簡單：P – Medda86

你應該把這個帖子標記爲遵循堆棧溢出標準的正確答案 – Medda86

你幾乎可以做2種方式。通過內聯塊（使用像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描述。

來源

2014-05-03 23:21:42 Dorvalla

使用HTML嵌套表格

回答

相關問題