Table寬度 Td寬度問題

        <table style="width:600px; height:200px;">
            <tr>
                <td style="width:200px; border:solid 20px #000;"></td>
                <td style="width:200px; border:solid 20px #000;"></td>
                <td style="width:200px; border:solid 20px #000;"></td>
            </tr>
        </table>

table的實際寬度=600px，因爲table定義了width；每個td的寬度是(600px-20px*6)/3

        <table style="width:600px; height:200px;border-collapse:collapse;">
            <tr>
                <td style="width:200px; border:solid 20px #000;"></td>
                <td style="width:200px; border:solid 20px #000;"></td>
                <td style="width:200px; border:solid 20px #000;"></td>
            </tr>
        </table>

table的實際寬度=600px，因爲table定義了width；每個td的寬度是(600px-20px*4)/3 ，因爲table樣式中有border-collapse:collapse;，會將相鄰td的2個border合併成1個

        <table style="height:200px;border-collapse:collapse;">
            <tr>
                <td style="width:200px; border:solid 20px #000;"></td>
                <td style="width:200px; border:solid 20px #000;"></td>
                <td style="width:200px; border:solid 20px #000;"></td>
            </tr>
        </table>

table的實際寬度=200px*3+20px*4，因爲table沒有定義寬度，所以table寬度按每個td的寬度+border的寬度；每個td的寬度是(600px+20px*4)/3，

        <table style="height:200px;">
            <tr>
                <td style="width:200px; border:solid 20px #000;"></td>
                <td style="width:200px; border:solid 20px #000;"></td>
                <td style="width:200px; border:solid 20px #000;"></td>
            </tr>
        </table>

table的實際寬度=200px*3+20px*6，因爲table沒有定義寬度，所以table寬度按每個td的寬度+border的寬度；每個td的寬度是(600px+20px*6)/3，