table边框和td的width失效
table元素有一个属性border,可设置table的边框。这个边框对内部元素有效。
不同于style:border,这个仅仅是外边框。
table{
width:60%;
border-collapse:collapse;
border:3px solid red;
}
<div class="container">
<table border="1">
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
</div>
以下为结果:
这种直接设置border限制了整体table的样式,无法灵活的对部分td设置不同样式。
table{
width:60%;
border-collapse:collapse;
}
table td{
border: 1px solid green;
}
.blue{
border-color: blue !important;
}
<div class="container">
<table >
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td class="blue">4</td></tr>
</table>
</div>
------------------------------------------
width无效问题:
table-layout默认的布局是auto;根据内容会自动往外撑开。
只有设置为table-layout:fixed;才可以固定页面的宽度,但应用较少。
要想对个别列采用固定宽度,可将内容放在一个div中,将div设置width,放入到td中即可。
table边框和td的width失效的更多相关文章
- table中的td限制宽度width也不能让字符过长变成省略号生效?
table中的td限制宽度width也不能让字符过长变成省略号生效? http://blog.csdn.net/java_mr_zheng/article/details/49423247 CSS t ...
- table中的td自动换行
总有那么几个时候会觉得,table的td不能自适应换行真坑,凭什么只能用tr来换行,经常数据都是连在一起的呀,你叫我怎么把它拆分放到tr里...... 那能不能用ul和li来替换?可以是可以,不过有时 ...
- table:设置边距,td内容过长用省略号代替
table:设置边距,td内容过长用省略号代替 1.table:设置边距 合并表格边框border-collapse: collapse,然后用th,td的padding设置内容和边框之间的空隙pad ...
- 借助JavaScript中的Dom属性改变Html中Table边框的颜色
借助JavaScript中的Dom属性改变Html中Table边框的颜色 -------------------- <html> <head> <title>我是页 ...
- table边框1px
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- table边框设置
一.表格的常用属性基本属性有:width(宽度).height(高度).border(边框值).cellspacing(表格的内宽,即表格与tr之间的间隔). cellpadding(表格内元素的间隔 ...
- 解决table边框在打印中不显示的问题
先了解一下,table边框如何设置 一.只对表格table标签设置边框 只对table标签设置border(边框)样式,将让此表格最外层table一个边框,而表格内部不产生边框样式.CSS代码: .t ...
- table 边框问题
对table设置css样式边框,分为几种情况:1.只对table设置边框2.对td设置边框3.对table和td技巧性设置表格边框4.对table和td设置背景,实现完美表格边框 以下DIVCSS5对 ...
- html中table边框属性
1.向右(横向)合并: <td colspan="5"><span>后台管理系统</span></td> 2.向下(纵向)合并: & ...
随机推荐
- NTLM 了解
NTLM是NT LAN Manager的缩写,这也说明了协议的来源.NTLM 是 Windows NT 早期版本的标准安全协议,Windows 2000 支持 NTLM 是为了保持向后兼容.Windo ...
- TensorFlow 官方文档中文版学习
TensorFlow 官方文档中文版 地址:http://wiki.jikexueyuan.com/project/tensorflow-zh/
- H.264帧结构详解
6.1.2.源码简单浏览 6.1.3.重点1:h.264帧结构6.1.4.重点2:帧结构分析软件的使用6.1.5.重点3:rtsp网络编程6.1.6.重点4:wireshark网络抓包工具的使用 6. ...
- php preg_replace空格无法替换问题
一次坑爹的小bug.读取一段文字(编码utf-8),想替换掉空格,str_replace(" "..).preg_replace("/\s/"..)都不起作用. ...
- java日期格式转换工具类
原文地址:http://blog.csdn.net/zhiweianran/article/details/7991531 package com.ace.backoffice.utils; impo ...
- UI设计心得
旁观型ui.追求一种无所不在,同时低调退隐的,奢华的存在感.内容由用户自己去搜索,浏览,构建,召唤,或是随着信息世界的某种外界趋势自然产生,ui作为始终凌驾于用户之上的高高在上的守护神,随时起到中承, ...
- 在Windows下使用svn命令行教程及svn命令行的解释
本文转载自:https://blog.csdn.net/yangxiao2shi/article/details/50719286/ 以前在公司一直使用git,现在的公司改用svn,一时间还真的不知道 ...
- 远程复制文件scp使用
1. install sudo apt-get install openssh-client openssh-server 2. login ssh remoteuser@remoteIP 3. co ...
- 安卓手机安装虚拟定位的方法Xposed安装器+模拟位置(Xposed模块)
原文:https://www.52pojie.cn/thread-571328-1-1.html 未测试,据说只支持某些手机,小米和华为很难安装,建议买其他品牌. Xposed安装器步骤:·ROOT你 ...
- [UE4]射中机器人