表格单元格文本溢出问题

Question

在问过这个问题后，我终于明确地弄明白了这个问题。这是我遇到问题的代码：

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，右边是1）

左边是我想要的数据。现在有人说“只需添加最大宽度：100px;左右”，这是我不能做的事情。它确实很好，当然，直到你开始处理百分比然后max-width神奇地决定不工作。我还觉得有一种比在每个单元格上指定最大宽度更简单的方法（没有html5 doctype的左侧示例也证明了这一点）。

简而言之：我试图在单元格中使用省略号自动切断文本，具体取决于其相应标题宽度的宽度。

这变得非常烦人，因为我一直试图解决这个问题几个小时，所以任何帮助都会受到赞赏。