0

在之前问过这个问题后，我终于具体弄清楚了这个问题。这是我遇到问题的代码：

CSS

table {
    display: block;
    margin: 30px 0 auto 0;
    width: 100%;
    max-width: 1300px;
    text-align: left;
    white-space: nowrap;
    border-collapse: collapse;
    table-layout:fixed;
}

td {
    max-width: 200px;
    overflow: hidden;
    white-space: nowrap;
    word-wrap:break-word;
    text-overflow: ellipsis;
    border: 1px solid black;
}

HTML

<table>
    <tr>
        <th style="width: 18%;">Col 1</th>
        <th style="width: 12%;">Col 2</th>
        <th style="width: 13%;">Col 3</th>
        <th style="width: 7%">Col 4</th>
        <th style="width: 7%">Col 5</th>
        <th style="width: 6%">Col 6</th>
        <th style="width: 5%">Col 7</th>
        <th style="width: 13%">Col 8</th>
        <th style="width: 16%">Col 9</th>
        <th style="width: 3%">Col 10</th>
    </tr>
    <tr>
        <td>Some</td>
        <td>Data</td>
        <td>Stuff</td>
        <td>foo</td>
        <td>bar</td>
        <td>etc</td>
        <td>whatever</td>
        <td>stuff</td>
        <td>Alotofdatakkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</td>
        <td>Yes</td>
    </tr>
</table>

几乎，我希望根据标题中的百分比宽度（在本例中为 16%）修剪长数据。唯一的问题是这在 html5 中不起作用：（在这张图片中，左边没有 a，右边有一个）

http://puu.sh/2T9N7.png

左边是我希望数据的样子。现在，在有人说“只需添加 max-width: 100px; 左右”之前，这是我无法做到的。当然，它可以正常工作，直到你开始处理百分比然后 max-width 神奇地决定不工作。我也觉得有一种比在每个单元格上指定最大宽度更简单的方法（没有 html5 doctype 的左示例也证明了这一点）。

简而言之：我试图让单元格内的文本根据其相应标题宽度的宽度自动用椭圆截断。

这变得非常烦人，因为我已经尝试了几个小时来解决这个问题，所以任何帮助都将不胜感激。

4

0 回答 0