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.向下(纵向)合并: & ...
随机推荐
- leetcode:Single Number【Python版】
1.用双重循环逐个遍历(超时) 2.用list B的append和remove函数(超时) 3.用dict B(AC) class Solution: # @param A, a list of in ...
- 在服务端处理同步发送小消息的性能上Kafka>RocketMQ>RabbitMQ
在发送小消息的场景中,三个消息中间件的表现区分明显: Kafka的吞吐量高达17.3w/s,远超其他两个产品.这主要取决于它的队列模式保证了写磁盘的过程是线性IO.此时broker磁盘IO已达瓶颈. ...
- 修改oracle系统参数spfile导致数据库无法启动解决
错误示范: SQL> alter system set nls_date_format='yyyy-mm-dd 24hh:mi:ss' scope=spfile;System altered.我 ...
- JSP中的EL (Express Language表达式语言)
EL语言的目的: 用于无java代码的JSP页面 创建el1.jsp,el2.jsp el1.jsp <%@ page language="java" contentType ...
- URL中的hash(井号)
1.#的含义 #代表网页中的一个位置,其右边的字符,就是该位置的标识符.比如 http://www.example.com/index.html#print 就是代表index.html中的print ...
- 导出pb模型之后测试的python代码
链接:https://blog.csdn.net/thriving_fcl/article/details/75213361 saved_model模块主要用于TensorFlow Serving.T ...
- Oracle学习操作(5)触发器
Oracle触发器 一.触发器简介 具备某些条件,由数据库自动执行的一些DML操作行为: 二.语句触发器 现在数据库创建t_book表:t_booktype表:t_book表的typeid存在外键参考 ...
- 常用的sql语句(存储过程语法)
1.存储过程语法 ①package create or replace package PKG_RPT_WAREHOUSE is -- Author : -- Created : 2018/9/28 ...
- ASP.NET Web Pages:发布网站
ylbtech-.Net-ASP.NET Web Pages:发布网站 1.返回顶部 1. ASP.NET Web Pages - 发布网站 学习如何在不使用 WebMatrix 的情况下发布 Web ...
- 杂项:MSMQ
ylbtech-杂项:MSMQ MicroSoft Message Queuing(微软消息队列)是在多个不同的应用之间实现相互通信的一种异步传输模式,相互通信的应用可以分布于同一台机器上,也可以分布 ...