表格DIV和CSS

該表格是以PHP動態生成的，但由於某些原因，它不能正確顯示邊框。 CSS還有一些方面讓我感到困惑。任何人都可以幫助我理解Firefox爲什麼會放置我爲元素邊框放置的東西？這是生成的HTML。表格DIV和CSS

<table style="width:208px;"> 
<tr> 
    <td colspan="7"> 
     <table style="width:100%; border-collapse:collapse"> 
      <tr> 
       <td style="background-color:#999999; color:#FFFFFF; text-align:center; height:28px;">&lt;</td> 
       <td colspan="5" style="background-color:#999999; color:#FFFFFF; text-align:center; height:28px;">September</td> 
       <td style="background-color:#999999; color:#FFFFFF; text-align:center; height:28px">&gt;</td> 
      </tr> 
     </table> 
    </td> 
</tr> 
<tr> 
    <td style="background-color:#999999; color:#FFFFFF; text-align:center; width:28px; height:28px; border:thin; border-color:#FFFFFF; border-style:solid;">S</td> 
    <td style="background-color:#999999; color:#FFFFFF; text-align:center; width:28px; height:28px; border:thin; border-color:#FFFFFF; border-style:solid;">M</td> 
    <td style="background-color:#999999; color:#FFFFFF; text-align:center; width:28px; height:28px; border:thin; border-color:#FFFFFF; border-style:solid;">T</td> 
    <td style="background-color:#999999; color:#FFFFFF; text-align:center; width:28px; height:28px; border:thin; border-color:#FFFFFF; border-style:solid;">W</td> 
    <td style="background-color:#999999; color:#FFFFFF; text-align:center; width:28px; height:28px; border:thin; border-color:#FFFFFF; border-style:solid;">T</td> 
    <td style="background-color:#999999; color:#FFFFFF; text-align:center; width:28px; height:28px; border:thin; border-color:#FFFFFF; border-style:solid;">F</td> 
    <td style="background-color:#999999; color:#FFFFFF; text-align:center; width:28px; height:28px; border:thin; border-color:#FFFFFF; border-style:solid;">S</td> 
</tr> 
<tr> 
    <td colspan="7"> 
     <table style="width:100%; border:thin; border-color:#000000; border-style:solid; background-color:#FFFFFF; color:#000000"> 
      <tr style="border:thin; text-align:center;"> 
       <td style="border:thin; text-align:center;"></td> 
       <td style="border:thin; text-align:center;"></td> 
       <td style="border:thin; text-align:center;"></td> 
       <td style="border:thin; text-align:center;"></td> 
       <td style="border:thin; text-align:center;"></td> 
       <td style="border:thin; text-align:center;"></td> 
       <td style="border:thin; text-align:center;"></td> 
      </tr> 
      <tr style="border:thin; text-align:center;"> 
       <td style="border:thin; text-align:center;">1</td> 
       <td style="border:thin; text-align:center;">2</td> 
       <td style="border:thin; text-align:center;"><div style="border-style:solid; border:thin; border-color:#008000; height:27px; width:27px">3</div></td> 
       <td style="border:thin; text-align:center;"><div style="border-style:solid; border:thin; border-color:#0000FF; height:27px; width:27px">4</div></td> 
       <td style="border:thin; text-align:center;">5</td> 
       <td style="border:thin; text-align:center;">6</td> 
       <td style="border:thin; text-align:center;">7</td> 
      </tr> 
      <tr style="border:thin; text-align:center;"> 
       <td style="border:thin; text-align:center;">8</td> 
       <td style="border:thin; text-align:center;">9</td> 
       <td style="border:thin; text-align:center;"><div style="border-style:solid; border:thin; border-color:#008000; height:27px; width:27px">10</div></td> 
       <td style="border:thin; text-align:center;">11</td> 
       <td style="border:thin; text-align:center;">12</td> 
       <td style="border:thin; text-align:center;">13</td> 
       <td style="border:thin; text-align:center;">14</td> 
      </tr> 
      <tr style="border:thin; text-align:center;"> 
       <td style="border:thin; text-align:center;">15</td> 
       <td style="border:thin; text-align:center;">16</td> 
       <td style="border:thin; text-align:center;">17</td> 
       <td style="border:thin; text-align:center;">18</td> 
       <td style="border:thin; text-align:center;">19</td> 
       <td style="border:thin; text-align:center;"><div style="border-style:solid; border:thin; border-color:#008000; height:27px; width:27px">20</div></td> 
       <td style="border:thin; text-align:center;"><div style="border-style:solid; border:thin; border-color:#0000FF; height:27px; width:27px">21</div></td> 
      </tr> 
      <tr style="border:thin; text-align:center;"> 
       <td style="border:thin; text-align:center;">22</td> 
       <td style="border:thin; text-align:center;">23</td> 
       <td style="border:thin; text-align:center;">24</td> 
       <td style="border:thin; text-align:center;">25</td> 
       <td style="border:thin; text-align:center;">26</td> 
       <td style="border:thin; text-align:center;"><div style="border-style:solid; border:thin; border-color:#F5831C; height:27px; width:27px">27</div></td> 
       <td style="border:thin; text-align:center;">28</td> 
      </tr> 
      <tr style="border:thin; text-align:center;"> 
       <td style="border:thin; text-align:center;">29</td> 
       <td style="border:thin; text-align:center;"><div style="border-style:solid; border:thin; border-color:#F5831C; height:27px; width:27px">30</div></td> 
       <td style="border:thin; text-align:center;"></td> 
       <td style="border:thin; text-align:center;"></td> 
       <td style="border:thin; text-align:center;"></td> 
       <td style="border:thin; text-align:center;"></td> 
       <td style="border:thin; text-align:center;"></td> 
      </tr> 
     </table> 
    </td> 
</tr>

來源

2012-09-13 William Michael Vondran

你可能想要寫的元素的規則，所以你不要對於該標籤的每一個實例，都不必重複。這可能會幫助你弄清楚發生了什麼。理想情況下，您不希望將您的CSS與HTML混合在一起，因爲如果您需要更改某些內容，它會造成惡夢。 – patricksweeney

它實際上是在使用PHP的循環中生成的，所以我實際上並不需要輸出每一行 –

但是，仍然難以保持這種方式。 – patricksweeney