表格细边框问题

这是关于怎么设置HTML表格细边框的问题,把表格边框设置为细小的线条边框

一般我们用表格的时候总会给它个border属性,比如:<table border="1">,其效果如下:

ID NAME GENDER
1001 mike male

可以发现表格的边框好像很宽,当然这里的“很宽”绝对不是表格border的宽,大家看到的宽应该是<td>之间有间隙所致。因此只需 要修改表格的cellspacing属性即可,即:<table border="1px" cellspacing="0px">,效果如下:

ID NAME GENDER
1001 mike male

但是,好像宽度还是没有我们想象的那样:只有一个像素的宽,其实,上图大家看到的其实是两个像素的宽,为什么呢,这是因为<td>之间的边框没有重合所致。修改表格的border-collapse属性即可,

即<table border="1px" cellspacing="0px" style="border-collapse:collapse">

ID NAME GENDER
1001 mike male

再给表格加个颜色,<table border="1px" bordercolor="#000000" cellspacing="0px" style="border-collapse:collapse">

ID NAME GENDER
1001 mike male
时间: 2024-10-05 16:29:54

表格细边框问题的相关文章

设置HTML表格细边框

简介:WEB前端|这是关于怎么设置HTML表格细边框的问题,把表格边框设置为细小的线条边框一般我们用表格的时候总会给它个border属性,比如:<tableborder="1">,其效果如下:IDNAMEG... 这是关于怎么设置HTML表格细边框的问题,把表格边框设置为细小的线条边框 一般我们用表格的时候总会给它个border属性,比如:<table border="1">,其效果如下: ID NAME GENDER 1001 mike m

表格细边框 并且CSS3加圆角

.YJ table{width:625px;height:860px;text-align:center;overflow:hidden; background:#fff;border-radius: 10px; border-collapse: collapse;border:1px solid #299e61;} .YJ table td{font-size:14px;color:#299e61;border:1px solid #299e61;} 效果图:

table 细边框的实现方式

方式1 设置边框的BORDER=0 .cellspacing=1,设置Table的背景色为所要的边框色,再设置所有的td背景色为白色,这样细边框就显露出来了. 方式2 设置BORDER=0 ,再通过CSS,给Table加上1px的border-top,border-left,然后再设置所有的td的border-right,border-bottom,这样也能达到所要的效果. 方式3 设置table的CSS为{border-collapse:collapse;border:none;},再设置td

设置Table的细边框

1.设置边框的border=0 .cellspacing=1,设置Table的背景色为所要的边框色,再设置所有的td背景色为白色,这样细边框就显露出来了. 2.设置border=0 ,再通过CSS,给Table加上1px的border-top,border-left,然后再设置所有的td的border-right,border-bottom,这样也能达到所要的效果. 3.设置table的CSS为{border-collapse:collapse;border:none;},再设置td的CSS为{

用css样式,为表格加入边框

Table 表格在没有添加 css 样式之前,是没有边框的.这样不便于我们后期合并单元格知识点的讲解,所以在这一节中我们为表格添加一些样式,为它添加边框. 在右侧代码编辑器中添加如下代码: <style type="text/css"> table tr td,th{border:1px solid #000;} </style> 上述代码是用 css 样式代码(后面章节会详细讲解),为th,td单元格添加粗细为一个像素的黑色边框. 结果窗口显示出结果样式: 示

table单元格设置细边框

设置table的CSS为{border-collapse:collapse;border:none;}, 再设置td的CSS为{border:solid #000 1px;}, <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&qu

总结css表格,边框,轮廓,盒子模型,边距

css表格:border-collapse     是否把表格边框合并为单一边框 separate/collapse.border-spacing     设置分隔单元格边框的距离 num.caption-side     表格标题的位置 Top/bottom.empty-cells     设置是否显示表格中的空单元格 hide/show.table-layout     设置显示单元.行和列的算法.automatic: 列宽度由单元格内容设定默认.fixed: 列宽由表格宽度和列宽度设定.i

设置html表格无边框

今天写网页界面写了一个表格然后开始设置表格无任何边框一开始采用常用的方法 加了这么一句话 border="0" cellpadding="0" cellspacing="0" 在本地测试确实没边框放到我的代码里后边框还是有,搜了大半天也常识了很多方法最后用下面的这种方式解决了 <td style="color: #FFF"> 我的理解是这句话可以将表格总体都设置为白色然后呢问题又来了 字体是黑色字体也消失了 然后我

表格线边框重复css解决方法

1.td 的边框和table 的边框重叠 .table { border-left:1px solid #dedede; border-top:1px solid #dedede;} .td { border-right:1px solid #dedede; border-bottom:1px solid #dedede;} table 只用左边框和上边框,每个td只有右边框和下边框,效果就是整个表格左.上边框是连续实线,右.下边框是延续td的边框所以是断断续续的 解决方法: .table {b