表DIV和CSS

时间:2012-09-13 01:26:59

标签: css html

此表是在PHP中动态生成的,但由于某种原因,它不会正确显示边框。 CSS仍有一些方面让我感到困惑。任何人都可以帮助我理解为什么Firefox超过了我为元素边界所做的事情?这是生成的HTML。

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

2 个答案:

答案 0 :(得分:3)

完成style="border:thin solid silver;

等边框属性

希望这会有所帮助

答案 1 :(得分:0)

我不确定您遇到的错误但尝试更改边框:薄到边框:2px;

瘦= 2px in ie但是FF和Chrome中的1px