Doctype 或 padding - Chrome 不会像 FF、IE、Opera 那样显示表格答案

【问题标题】：Doctype or padding - Chrome doesn't display the table like FF, IE, OperaDoctype 或 padding - Chrome 不会像 FF、IE、Opera 那样显示表格
【发布时间】：2011-12-03 19:10:31
【问题描述】：

我的问题与我在这里找到的问题相似：

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

【问题讨论】：

标签： google-chrome padding doctype column-width

【解决方案1】：

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

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

【讨论】：