关于 table td 实现细边框的样式

最新推荐文章于 2024-04-19 20:39:07 发布
最新推荐文章于 2024-04-19 20:39:07 发布
阅读量9.8k 收藏
点赞数
分类专栏： HTML相关 文章标签： table class generator xhtml html border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lifeng_2009/article/details/4889639
版权

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <style type="text/css">
 .topTd{border-top:1px solid #ccc;}
 .rightTd{border-right:1px solid #ccc;}
 .bottomTd{border-bottom:1px solid #ccc;}
 .leftTd{border-left:1px solid #ccc;}
  </style>
 </head>

 <body>
  <table width="320" border="0" cellspacing="0" cellpadding="0">
 <tr>
  <td class="leftTd topTd">a</td>
  <td class="leftTd topTd">b</td>
  <td class="leftTd topTd">c</td>
  <td class="leftTd rightTd topTd">d</td>
 </tr>
 <tr>
  <td class="leftTd topTd">1</td>
  <td class="leftTd topTd">&nbsp;</td>
  <td class="leftTd topTd">&nbsp;</td>
  <td class="leftTd rightTd topTd">&nbsp;</td>
 </tr>
 <tr>
  <td class="leftTd topTd">2</td>
  <td class="leftTd topTd">&nbsp;</td>
  <td class="leftTd topTd">&nbsp;</td>
  <td class="leftTd rightTd topTd">&nbsp;</td>
 </tr>
 <tr>
  <td class="leftTd topTd bottomTd">3</td>
  <td class="leftTd topTd bottomTd">&nbsp;</td>
  <td class="leftTd topTd bottomTd">&nbsp;</td>
  <td class="leftTd rightTd topTd bottomTd">&nbsp;</td>
 </tr>
  </table>
 </body>
</html>

生活
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
table表格边框样式_HTML——表格制作
weixin_39837727的博客
12-09 3205
1.表格至少包含三个标签：<table>、<tr>、<td>，快捷键：table>tr>tdtable：表格，定义的是整个的表格大结构。属性：border边框属性，style样式属性<!-- 边框宽度为1像素px， style样式边框塌陷，去除边框空隙--><table border="1" style="border-collap...
让Table的TD有边框而Table右左没有边框的CSS样式
09-25
主要介绍了让Table的TD有边框而Table右左没有边框的CSS样式，需要的朋友可以参考下
web第十课：table表格标签
YY的博客
08-24 3847
table表格标签及它的属性
CSS基础：table的4个标签的样式详解（6000字长文！附案例）
最新发布
u013179804的博客
04-19 3432
之前在 HTML 基础部分，我们讲解了表格的结构和写法。简单回顾下。包含等表格部分。和分别包含多个行。行中可以包含或单元格，用来显示表格的标题或数据。本文，我们来给它们增加一些漂亮的样式。图为增加样式前，增加样式后的效果，是不是确实漂亮多了。ok，那我们一起来看看这些表格标签的样式属性吧。
HTML 表格table tr td、表头标题、表结构、合并单元格
热门推荐
七七的博客
03-04 1万+
表格的主要作用 表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整,可读性非常好。 特别是后台展示数据的时候,能够熟练运用表格就显得很重要。 一个清爽简约的表格能够把繁杂的数据表现得很有条理。 表格不是用来布局页面的，而是用来展示数据的。 <table> <tr> <td>单元格内的文字</td> </tr> </...
好看的table-css样式
qq_45450789的博客
04-13 5742
1.单像素边框css表格 源代码： <style type="text/css"> table.gridtable { font-family: verdana,arial,sans-serif; font-size:11px; color:#333333; border-width: 1px; border-color: #666666; border-collapse: collapse; } table.gridtable t.
table的td宽度计算规则
weixin_42178670的博客
05-19 2198
table的td宽度计算规则 前置条件：设定table宽度为固定值1000px， 1、当里面的td总宽度和小于table宽度时，td宽度会被根据各个td宽度比例重新计算 <table style="width: 1000px;"> <tr> <td style="width: 100px;">aaa</td> <td style="width: 150px;">bbb</td> &
CSS样式简单实现Table没有外边框只有内边框
01-21
效果图： 实现方法： 复制代码代码如下: <!... <head> <meta charset=”UTF-8″>... } table td { border-top: 0; border-right: 1px solid #999; border-bottom: 1px solid #999; border-left: 0; } ta
CSS实现表格细边框的两种方法
12-13
在网页制作中，细边框这个制作方法是必不可少的。这里介绍2种常见的表格细边框制作方法，均通过XHTML验证。 复制代码代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...
当td为空时怎样显示其边框
12-09
原因倒也不复杂：因为在 IE 下（ Firefox 似乎和 IE 一致）如果某个 td 的内容为空的话，即便你设置了高度和宽度，这个 cell 的边框样式也是不会被显示出来的； Opera 则不管是否有内容与否，一概应用样式来渲染。这...
table td 内容html标签,HTML标签之table
weixin_42497772的博客
06-09 805
对于table来说，在一些小的模块中进行表格布局是非常好用的。我们可以这样来理解table，主要分成table部分和td部分。table部分：主要是来控制外边框的(就是最外面一层边框，不包括里面部分)，它拥有的属性为：margin属性，border属性，cellspacing属性，规定单元格之间的空白cellpadding属性，规定单元边沿与其内容之间的空白。tr部分：主要来分割有几行，一般只需要...
table嵌套table边框样式
02-21
table嵌套table的边框样式代码例子（包含div嵌套table的外边框）。
table中td内容换行问题
11-30
例如l：lovelovelovelovelovelovelovelovelovelovelovelove这样的，于是乎，我们的td就被无情的撑开了，无法换行，⊙﹏⊙ 解决方案： 一般有两种：就是td里面再套一个div，然后设置这个div的word-break：all，或者什么，网上很多 第二种是针对表格：首先要将table的宽度设置为100%，然后把表格的sytle的table-layout：fixed，就是表格固定宽度，就是表格即要自适应他外面的容器，也不要撑出去，然后设置td的word-wrap：break-word；换行，问题就解决了。
table 边框样式css
Carterslam
10-20 196
第 一 行 ...
css 修改table边框的样式，修改单元格样式、间距
PrimaryColor
05-11 2148
我们在调table的边框样式时，经常会出现单元格和表格的样式重叠，而造成某条边框的的异常粗，或者异常细。 修改单元格间距: cellspacing="0" 修改table标签的样式： <tableborder="1"style="width:100%;text-align:center;border:1pxsolid#ccc;"cellspacing="0"> <tr> <td...
td标签 设置边框
happy_star123的博客
08-17 1203
td标签 设置边框
显示和隐藏table中的border
quechao123的专栏
06-10 6368
<br /><table border="1" bordercolor="#FF9966" ><br /><tr><br /><td width="102" style="border-right-style:none">隐藏右边框</td><br /><td width="119" style="border-left-style:none">隐藏左边框</td><br /></tr><br /><tr><br /><td style="border-top-style:none">隐藏上边框</td><
table中td与td显示细线
qq970014558的专栏
09-09 1414
在html中table的边框值border="1"时样式比较难看，可以将它设置成细线在table标签中添加样式border-collapse:collapse;" border="1"即可。
原生table表格实现带边框
06-08
要实现带边框的table表格，可以使用CSS样式来设置。以下是一个示例： ```html <table border="1"> 姓名 年龄 <td>张三</td> <td>20</td> <td>李四</td> <td>25</td> </table> ``` CSS样式： ``...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值