Форматы таблиц в Google Chrome (чистый HTML)

Question

Я пытаюсь понять, где я делаю ошибку в этом коде, но не могу. Прекрасно работает в Firefox и IE, но в Chrome внутренние ячейки не центрированы, как кажется в коде.

<table cellpadding="0" cellspacing="0" style="width: 100%">
    <tr>
        <td rowspan="7"></td>
        <td style="width: 600px; height: 100px;">&nbsp;</td>
        <td rowspan="7"></td>
    </tr>
    <tr>
        <td class="style1" valign="top"><?php echo($title); ?></td>
    </tr>
    <tr>
        <td class="style2" valign="top"><?php echo($subtitle); ?></td>
    </tr>
    <tr>
        <td class="style3" valign="top"><?php echo($content); ?></td>
    </tr>
    <tr>
        <td class="style4"><?php echo($endtitle); ?></td>
    </tr>
    <tr>
        <td style="width: 600px; height: 30px"></td>
    </tr>
    <tr>
        <td style="width: 600px; height: 100px" class="style5" valign="top"></td>
    </tr>
</table>

Style1 и 2 и так просто, как:

.style1 {
    text-align: center;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 32px;
    color: #2B2B2B;
    width: 600px;
}

Только с некоторыми шрифтами

На первом изображении показано, как это делает Google Chrome, а во-вторых, как это делает Firefox:

Answer 1

Вы должны установить ширину таблицы.Установка ширины в вашем тд является неправильной формой.Ваш HTML должен выглядеть так:

    <table cellpadding="0" cellspacing="0" style="width:600px">
    <tr>
        <td rowspan="7"></td>
        <td style="width: 600px; height: 100px;">&nbsp;</td>
        <td rowspan="7"></td>
    </tr>
    <tr>
        <td class="style1" valign="top"><?php echo($title); ?></td>
    </tr>
    <tr>
        <td class="style2" valign="top"><?php echo($subtitle); ?></td>
    </tr>
    <tr>
        <td class="style3" valign="top"><?php echo($content); ?></td>
    </tr>
    <tr>
        <td class="style4"><?php echo($endtitle); ?></td>
    </tr>
    <tr>
        <td style="width: 600px; height: 30px"></td>
    </tr>
    <tr>
        <td style="width: 600px; height: 100px" class="style5" valign="top"></td>
    </tr>
</table>

И ваш стиль должен выглядеть так:

.style1 {
    text-align: center;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 32px;
    color: #2B2B2B;
    width: 100%;
}

Answer 2

Вы не определяете ширину для td, поэтому она занимает всю ширину родительского элемента.Если вы добавите td {width:600px;}, то же самое будет и для Chrome.Если вы осмотрите td с помощью firebug, в DOM вы обнаружите, что значение offsetWidth равно 600, но если вы сделаете то же самое с инструментами разработчика Chrome, вы увидите, что offsetWidth равно 1900или любое значение в соответствии с вашим экраном).Таким образом, чтобы получить одинаковый результат во всех браузерах, вы должны установить фиксированную ширину, как я описал выше.