博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
table中table-layout;word-wrap、word-break;nowrap="nowrap";
阅读量:6443 次
发布时间:2019-06-23

本文共 1361 字,大约阅读时间需要 4 分钟。

全文总结,内容优先使用宽度;table-layout指定了各部分宽度,且向下有继承性,遇到合并单元格时怎么破;word-wrap 和word-break解决超长文本在规定的框中显示溢出怎么办;

 

一般属性总结

边框属性border(table)

间距属性cellpadding cellpacing  padding

字体属性font

文本属性text-align text-index vertical-align

背景属性backgrond 颜色 /图片 位置 重复

td和table的边框可以单独设置

.td{border:solid #add9c0; border-width:0px 1px 1px 0px;}

.table{border:solid #add9c0; border-width:1px 0px 0px 1px;}

详细介绍特殊属性应用

例一

常见问题,主要内容优先使用宽度。

nowrap="nowrap"用于td,规定表格单元格的内容不换行。

white-space:nowrap用于css,规定段落中的文本不换行。

<tr>

<td style="white-space:nowrap">Never increase, beyond what is necessary,</td>
<td>Never increase, beyond what is necessary, the number of entities required to explain anything</td>
</tr>

 

table-layout属性

用法:作用于table标签,显示单元格列宽的计算法则。

取值:auto(默认)列宽由内容确定。加载慢

        fixed。并设置第一行单元格宽度,之后的每一行单元格按照第一行的尺寸进行设定。加载快。

常见问题,第一行设置单元格合并后,第二行的宽度显示为平分。

解决办法,加一个隐形行设定为第一行,display:none;

<table border="1" style="table-layout:fixed;width:200px;">

<tr display="none">
<td style="width:30%"></td>
<td style="width:20%"></td>
<td style="width:50%"></td>
</tr>
<tr>
<td style="30%">a</td>
<td colspan="2">b</td>
</tr>
<tr>
<td>a</td>
<td style="20%">b20%</td>
<td style="50%">b50%</td>
</tr>
</table>

常见问题,单元格内容溢出

word-wrap:break-word是否允许浏览器在单词内进行断句。对于长单词,首先尝试移入下一行,若仍然溢出,断句。

word-break:all-break怎样进行单词内的断句。直接简单粗暴单词内断句。原样式加word-wrap:break-word加word-break:break-all;

 

转载于:https://www.cnblogs.com/evaaa/p/5663328.html

你可能感兴趣的文章
Wireshark抓包分析/TCP/Http/Https及代理IP的识别
查看>>
不同包下,相同数据结构的两个类进行转换
查看>>
软件安装(linux)
查看>>
TeamPlain for VSTS - Web Access for Team System-TFS 跨平台的客户端
查看>>
面对前车之鉴的AR,现在的VR要做些什么?
查看>>
vscode 换行符\n 变成\r\n
查看>>
一个绘制虚线的非常规函数(常规方法,打印机上绘制不出虚线)
查看>>
获得本机的IP,掩码和网关
查看>>
大数据之 ZooKeeper原理及其在Hadoop和HBase中的应用
查看>>
Delphi中将XML文件数据装入DataSet
查看>>
你刚才在淘宝上买了一件东西
查看>>
发布一个 Linux 下的 C++ 多线程库
查看>>
Python序列类型
查看>>
再谈ThinkPHP
查看>>
mac本显示隐藏文件或关闭显示隐藏文件
查看>>
spring4.0 整合 Quartz 实现任务调度(一)
查看>>
android复杂布局的一点思路
查看>>
Awesome Python
查看>>
java web简单权限管理设计
查看>>
Google Analytics
查看>>