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失效的更多相关文章

  1. table中的td限制宽度width也不能让字符过长变成省略号生效?

    table中的td限制宽度width也不能让字符过长变成省略号生效? http://blog.csdn.net/java_mr_zheng/article/details/49423247 CSS t ...

  2. table中的td自动换行

    总有那么几个时候会觉得,table的td不能自适应换行真坑,凭什么只能用tr来换行,经常数据都是连在一起的呀,你叫我怎么把它拆分放到tr里...... 那能不能用ul和li来替换?可以是可以,不过有时 ...

  3. table:设置边距,td内容过长用省略号代替

    table:设置边距,td内容过长用省略号代替 1.table:设置边距 合并表格边框border-collapse: collapse,然后用th,td的padding设置内容和边框之间的空隙pad ...

  4. 借助JavaScript中的Dom属性改变Html中Table边框的颜色

    借助JavaScript中的Dom属性改变Html中Table边框的颜色 -------------------- <html> <head> <title>我是页 ...

  5. table边框1px

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. table边框设置

    一.表格的常用属性基本属性有:width(宽度).height(高度).border(边框值).cellspacing(表格的内宽,即表格与tr之间的间隔). cellpadding(表格内元素的间隔 ...

  7. 解决table边框在打印中不显示的问题

    先了解一下,table边框如何设置 一.只对表格table标签设置边框 只对table标签设置border(边框)样式,将让此表格最外层table一个边框,而表格内部不产生边框样式.CSS代码: .t ...

  8. table 边框问题

    对table设置css样式边框,分为几种情况:1.只对table设置边框2.对td设置边框3.对table和td技巧性设置表格边框4.对table和td设置背景,实现完美表格边框 以下DIVCSS5对 ...

  9. html中table边框属性

    1.向右(横向)合并: <td colspan="5"><span>后台管理系统</span></td> 2.向下(纵向)合并: & ...

随机推荐

  1. NTLM 了解

    NTLM是NT LAN Manager的缩写,这也说明了协议的来源.NTLM 是 Windows NT 早期版本的标准安全协议,Windows 2000 支持 NTLM 是为了保持向后兼容.Windo ...

  2. TensorFlow 官方文档中文版学习

    TensorFlow 官方文档中文版 地址:http://wiki.jikexueyuan.com/project/tensorflow-zh/

  3. 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. ...

  4. php preg_replace空格无法替换问题

    一次坑爹的小bug.读取一段文字(编码utf-8),想替换掉空格,str_replace(" "..).preg_replace("/\s/"..)都不起作用. ...

  5. java日期格式转换工具类

    原文地址:http://blog.csdn.net/zhiweianran/article/details/7991531 package com.ace.backoffice.utils; impo ...

  6. UI设计心得

    旁观型ui.追求一种无所不在,同时低调退隐的,奢华的存在感.内容由用户自己去搜索,浏览,构建,召唤,或是随着信息世界的某种外界趋势自然产生,ui作为始终凌驾于用户之上的高高在上的守护神,随时起到中承, ...

  7. 在Windows下使用svn命令行教程及svn命令行的解释

    本文转载自:https://blog.csdn.net/yangxiao2shi/article/details/50719286/ 以前在公司一直使用git,现在的公司改用svn,一时间还真的不知道 ...

  8. 远程复制文件scp使用

    1. install sudo apt-get install openssh-client openssh-server 2. login ssh remoteuser@remoteIP 3. co ...

  9. 安卓手机安装虚拟定位的方法Xposed安装器+模拟位置(Xposed模块)

    原文:https://www.52pojie.cn/thread-571328-1-1.html 未测试,据说只支持某些手机,小米和华为很难安装,建议买其他品牌. Xposed安装器步骤:·ROOT你 ...

  10. [UE4]射中机器人