Question

我的问题看起来类似于我在这里找到的问题：

chrome vs FF/IE/Opera in calculating table cell width ? (table-layout:fixed)

我简化了页面。该页面包含一个表，在所有浏览器中看起来都相同，但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。谢谢。

Answer 1

我想知道填充是否导致日期因可用空间而换行。您可以尝试使用.no-wrap类在日期周围放置span标记，并为该类提供属性white-space：nowrap以防止日期包装。

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

文档类型或填充 - Chrome不显示FF，IE，Opera等表格

1 个答案: