Question

我有一个简单的表格，带有标题和表格。所有单元都应该是固定宽度，只有一个是可变的（例如名称）。

我需要table-layout: fixed才能在可变宽度单元格上使用text-overflow: ellipsis。

这是表格的CSS：

table {
    width: 550px;
    border: 1px solid #AAA;
    table-layout: fixed;
    border-collapse: collapse;
}
table td, table th {
    border: 1px solid #DDD;
    text-align: left;
    padding: 5px 15px 5px 15px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.one {
    width: 60px;
}
.two {
    width: auto;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.three, .four, .five {
    width: 90px;
}

检查 HTML, along with a demo 。

我试图让这个表在所有浏览器中的行为相同，但似乎在Safari中忽略了box-sizing：border-box。虽然根据this answer，它应该是对旧版Safari中的错误的修复。

以下是Chrome浏览器的外观： enter image description here

它在Safari 6.0.3中的外观如何： enter image description here

我测试的所有较新的Safari for Mac中也存在此问题。我几乎肯定我一周前在Safari中测试了它，包括新旧两种，它运行良好。它有点像新的Safari突然出现了一种新的bug。

我正在使用Safari Version 6.0.3（7536.28.10）。旧Safari版本5.0.5（6533.21.1,6533.21）似乎工作正常。

人们，在发疯之前帮帮我吧！我在这里做错了还是真的是个错误？

Answer 1

更好的方法是完全删除表并使用CSS，但如果不可能，我建议尝试一些特定于浏览器的css表，只会影响safari

jquery代码

if ($.browser.safari) {
                $("html").addClass("saf");
            };

然后在你的CSS中

.saf table
{
// any adjustments required
}

虽然如果使用这种方法，我建议至少在桌面上使用id。我不能声称这种方法是因为我在StackOverflow上发现了它，但是当我只需要一些浏览器特定的黑客攻击时我会使用它

<强>更新

只是包装任何人偶然发现这个错误，正如下面的评论中指出的那样。$ .browser已经在jquery的1.9版本中删除了，所以另一种选择是使用modernizr.js并使用如下代码

<script type="text/javascript">                             
    $(document).ready(function () {

        Modernizr.addTest('ff', function () {
            return !!navigator.userAgent.match(/firefox/i);
        });
        Modernizr.addTest('gc', function () {
            return !!navigator.userAgent.match(/chrome/i);
        });
        Modernizr.addTest('saf', function () {
            return !!navigator.userAgent.match(/safari/i);
        });      
        Modernizr.addTest('op', function () {
            return !!navigator.userAgent.match(/opera/i);
        });
    })           
</script>

Answer 2

试试这个，你可以使用：

<table width="100%" cellspacing="0">
<colgroup>
<col width="specific width of the column 1"/>
<col width="specific width of the column 2"/>
and so on
</colgroup>
<thead>
</thead>
<tbody>
</tbody>
</table>

Answer 3

尝试将列宽内联，但仅限于一行！例如：

<table>
<thead>
    <tr>
        <th class="one"   width="60">One</th>
        <th class="two">Two</th>
        <th class="three" width="90">Three</th>
        <th class="four"  width="90">Four</th>
        <th class="five"  width="90">Five</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td class="one">1</td>
        <td class="two">Text that could be too long for this column and it should be truncated.</td>
        <td class="three">3</td>
        <td class="four">4</td>
        <td class="five">5</td>
    </tr>
    <tr>
       ...
    </tr>
</tbody>

这是 demo 。

在我的safari 5.1.7（7534.57.2）中，你的代码工作得很好......我的也是......

Answer 4

This应该对这个问题有所了解。当在表格单元格中使用时，似乎box-sizing在Safari 6中不再起作用。

Answer 5

如果要设置width: auto;即可变宽度，请根据哪一行设置此值来考虑自己。一行可能是100px，另一行可能是该列的300px，那么哪一行很重要呢？你显然对此感到困惑。就像浏览器混淆应该应用哪一行width: auto;一样。有些浏览器根据其标题设置了这个，有些浏览器根据行内容设置了它。因此，您必须在任何浏览器中将宽度设置为相同。

您需要声明列的宽度，以便在任何浏览器中修复它。所以我刚刚在width: 60px;选择器中添加了.two。

参见 This Fiddle

注意：如果只是Safari中的问题，请将width: inherit;添加到.two选择器。它工作正常。

CSS：'table-layout：fixed'和Safari中单元格的边框大小

5 个答案: