Chrome - 保持列宽最小化

时间:2013-02-14 08:25:25

标签: html css google-chrome html-table

我有一个“有限宽度”和“宽”列的表。预期的行为是在调整表的大小时,有限宽度列变为可能的最小值,而宽列适合可用空间。

<!DOCTYPE html>
<style>
.limited {width:0;overflow:hidden;}
.wide {overflow:hidden;}
.limited div, .wide div {max-width:10em;white-space:nowrap;}
table {width:100%;}
</style>
<table id="example" border="1">
    <thead>
        <tr>
            <td class="limited"><div>veeeeeeee eeeeeeee eeeeee eeeeeeeeery</div></td>
            <td class="wide"><div>looooooooo ooooooooooo oooooooooooooooooo ooooooooooooooooo ooooooong</div></td>
            <td class="limited"><div>text</div></td>
        </tr>
    </thead>
</table>

复制的代码在Firefox和IE9中的行为与预期一致,但在Chrome中则不行。如何在Google Chrome中获得预期的行为?

2 个答案:

答案 0 :(得分:0)

.limited {width:1px;overflow:hidden;}

答案 1 :(得分:0)

.limited {width:1%;溢出:隐藏; }