Doctype или padding - Chrome не отображает таблицу как FF, IE, Opera - PullRequest
Новая
       37

Doctype или padding - Chrome не отображает таблицу как FF, IE, Opera

1 голос
/ 09 октября 2011

Моя проблема похожа на вопрос, который я нашел здесь:

хром против FF / IE / Opera при расчете ширины ячейки таблицы? (Таблица-макет: фиксированный)

Я упростил страницу. Страница содержит таблицу, которая выглядит одинаково во всех браузерах, кроме Chrome. Я полагаю, что проблема в заполнении (не знаю, как это исправить) или в doctype (я не знаю слишком много о doctype) ... Пожалуйста, помогите мне сделать Chrome таким же, как и в любом другом браузере. Спасибо. Ниже моя html-страница: 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>

<title>Looks different in Chrome vs FF, IE, Opera</title>

<style>


table.maintable {
    background-color:yellow;
    border: 1px solid red;
    border-spacing:0;
    border-collapse:collapse;
    table-layout:fixed;
    word-wrap:break-word;

}

table.maintable th, table.maintable td {
    border: 1px solid red;
    margin:0;
    padding:14px;
}


</style>

</head>


<body>
I want the date look like 05/10/2011, in 1 string. Chrome cuts the date into 2 parts. All other browsers are OK.  The problem is style <u>padding:14px;</u>, but we need some padding in cells. <br>
Also <b>table-layout:fixed;</b> and <b>word-wrap:break-word;</b> are needed because any long text without any spaces will not destroy the table size in this case. How to make Chrome look like any other browser?
<table class="maintable" style="width:510px;"><tbody>
<tr><th style="width:57px;">number number</th><th style="width:75px;">date</th><th>current info</th><th style="width:90px;">more</th></tr>
<tr><td><a href="http://google.com">40</a></td>
    <td>05/10/2011</td>
    <td><a href="http://google.com">2 lines in Crhome but 3 lines in other browsers. Also check the date.</a></td>
    <td><a href="http://google.com">more...</a></td>
</tr>
</tbody>
</table>   

</body></html>

Если вы считаете, что моя первая строка (объявление doctype) неверна, пожалуйста, покажите мне правильную строку. Сайт на одном из кириллических языков. XML не используется. Спасибо.

1 Ответ

0 голосов
/ 16 декабря 2014

Интересно, не является ли заполнение даты переносом даты из-за свободного места? Вы можете попытаться поместить тег span вокруг дат с помощью класса .no-wrap и дать этому классу свойство white-space: nowrap, чтобы предотвратить перенос дат. 

.no-wrap {
  white-space: nowrap;
}
...
<td>
    <span class="no-wrap">01/11/2014</span>
</td>
...
...