html - Chrome - 保持列宽最小

标签 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 中则不然。我怎样才能在谷歌浏览器中获得预期的行为?

最佳答案

.limited { 宽度:1%;溢出:隐藏;

关于html - Chrome - 保持列宽最小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14870566/

相关文章:

javascript - 清除特定域的缓存

flash - 将 Flash 视频转换为 HTML5

javascript - 谷歌动态图表不工作

html - <html> 上的 box-shadow inset 仅在网站的可视部分有效

html - 是否可以将多个类分配给一个 html 元素?

css - IE8 的多背景 CSS3 问题

html - 恢复 Google AMP 上的广告

html - 如何获取站点上使用的所有字体系列的列表?

google-chrome - 是否有我可以在本地设置或使用的浏览器选项卡标识符?

firefox - à,É 等重音字符不适用于 google chrome + silverlight 4