9

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

我需要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 以及演示。

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

这是它在 Chrome 中的外观： 在此处输入图像描述

以及它在 Safari 6.0.3 中的外观： 在此处输入图像描述

这个问题也出现在我测试过的所有较新的 Mac 版 Safari 中。我几乎可以肯定我一周前在 Safari 中对它进行了测试，新旧版本都运行良好。不知何故，新的 Safari 突然出现了一种新的错误。

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

人，在发疯之前帮助我！我在这里做错了什么还是真的是一个错误？

4

5 回答 5

2

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

jQuery代码

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

然后在你的CSS中

.saf table
{
// any adjustments required
}

尽管如果使用这种方法，我至少会在桌子上建议一个 id。我在 StackOverflow 上发现了这种方法，我不能声称它是我的功劳，但是当我只需要一些特定于浏览器的 hack 时，我就使用它

更新

只需将任何人偶然发现此错误，正如下面的评论中所指出的，$.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>
于 2013-04-10T08:59:07.123 回答
1

试试这个，你可以使用：

<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>
于 2013-04-10T06:01:00.013 回答
1

尝试内联列宽，但仅在一行上！例如： 

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

这是一个演示。

在我的 safari 5.1.7 (7534.57.2) 中，您的代码运行良好......我的也是......

于 2013-04-10T06:40:45.983 回答
1

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

于 2013-04-10T07:42:55.873 回答
1

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

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

看到这个小提琴

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

于 2013-04-12T04:06:53.293 回答