html – 为什么忽略表宽度?

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

内容简介:宽度设置不会被忽略;它只是被细胞内容的最低要求所覆盖.在每列中,最长的单词确定最小可能的宽度.这符合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


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

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

轻量级Django

轻量级Django

茱莉亚·埃尔曼 (Julia Elman)、马克·拉温 (Mark Lavin) / 侯荣涛、吴磊 / 中国电力出版社; 第1版 / 2016-11-1 / 35.6

自Django 创建以来,各种各样的开源社区已经构建了很多Web 框架,比如JavaScript 社区创建的Angular.js 、Ember.js 和Backbone.js 之类面向前端的Web 框架,它们是现代Web 开发中的先驱。Django 从哪里入手来适应这些框架呢?我们如何将客户端MVC 框架整合成为当前的Django 基础架构? 本书讲述如何利用Django 强大的“自支持”功......一起来看看 《轻量级Django》 这本书的介绍吧!

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具