html – 为什么忽略表宽度？

栏目: Html · 发布时间: 5年前

内容简介：宽度设置不会被忽略;它只是被细胞内容的最低要求所覆盖.在每列中,最长的单词确定最小可能的宽度.这符合CSS规范：对于表,width属性默认只是建议的最小宽度.不过,“尽可能小”是相对的.您可以通过不同方式启用分词.但要了解这会带给您什么,您可以通过更改<html>进行测试.标记为<html lang = ru>并将规则* {-moz-hyphens：auto}添加到CSS并在Firefox上测试页面.您将看到格式化的表格,以便单词被连字符,宽度尽可能接近声明的宽度.它看起来很糟糕.声明的宽度对于内容来说太小

我在下面编码样式：

table.gridtable {
    font-family: verdana,arial,sans-serif;
    font-size:14px;
    color:#333333;
    border-width: 1px;
    border-color: #666666;
    border-collapse: collapse;
        width: 400px;
}

我在Firebug中看不到任何重叠.然而,表宽度计算为812 px;

为什么？

实际页面在这里(俄语)： http://garmonia-znakomstva.ru/service.html

UPDATE

我可以添加不可见的单词中断,如果空间不足会导致单词断开和连字符,如果有足够的空间则会连续单词？

宽度设置不会被忽略;它只是被细胞内容的最低要求所覆盖.在每列中,最长的单词确定最小可能的宽度.这符合CSS规范：对于表,width属性默认只是建议的最小宽度.

不过,“尽可能小”是相对的.您可以通过不同方式启用分词.但要了解这会带给您什么,您可以通过更改<html>进行测试.标记为<html lang = ru>并将规则* {-moz-hyphens：auto}添加到CSS并在Firefox上测试页面.您将看到格式化的表格,以便单词被连字符,宽度尽可能接近声明的宽度.它看起来很糟糕.声明的宽度对于内容来说太小了.

或者,尝试在CSS中设置表{table-layout：fixed}.无论如何,这将强制宽度.这将使细胞内容溢出细胞.我不认为你会喜欢这个.

因此,我建议您不要尝试强制执行如此窄的宽度,而是完全删除宽度设置并启用连字符.结果看起来相对不错.对于连字符,我建议使用 Hyphenator.js ,这是一种适用于浏览器的基于JavaScript的方法;基于CSS的方法仍然具有相当有限的浏览器支持.

翻译自：https://stackoverflow.com/questions/13850614/why-table-width-is-ignored

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网