怎样消除html表格边框中间的缝隙 ?

怎样消除html表格边框中间的缝隙 ?,第1张

<table border=0 cellpadding="0" cellspacing="0" ></table>在表头里加上我写的那三句话就可以了。但是你要注意一点,当border=0的时候,你表格是没有边框的。看起来会很不爽。这时,就要求你学会变通了。我是这样做的:把表的背景色设置成红色,之后把每个td的背景色设置成白色。你看看效果是什么样?出现边框了哦!而且比border=1时的边框还要细些要好看工整一些

方式有很多1你可以单独为这个表格写class 样式 <table class='tb'></table> 2可以直接在table 标签上 写样式 style='border:1px solid #ddd' 3还可以通过标签关系 方式去修改特定一个标签的样式 具体还有看你页面的布局

就是把td的边框设成0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN" "http://wwww3org/TR/xhtml1/DTD/xhtml1-transitionaldtd">

<html xmlns="http://wwww3org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

table{

border-collapse:collapse;//表格单元格间距样式

border:1px solid #0F0;

}

tr{border:1px solid #0F0;}

td{

border:0px;}

</style>

</head>

<body>

<table width="200">

  <tr>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

  </tr>

  <tr>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

  </tr>

  <tr>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

  </tr>

  <tr>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

  </tr>

</table>

</body>

</html>

设置table 的cellspacing,cellpadding属性即可解决;

示例如下:

<table width="300px"  border="1" cellspacing="0" cellpadding="0" bordercolor="#FF0000">

  <tr>

    <td>1</td>

    <td>2</td>

  </tr>

  <tr>

    <td>3</td>

    <td>4</td>

  </tr>

</table>

效果如下:

<tr style="border:none"><td></td></tr>(设置行边框)

<tr><td style="border:none"></td></tr>(设置列边框)

也可以写个类,给不想要边框的加上这个类

<table width="600" height="200" align="center" style="border-left:#b22222 1px ridge;border-top:#b22222 1px ridge;">

<tr>

<td valign="top" style="padding-top:5px;padding-left:3px;"><img src="pugongyingjpg" width="100" height="100" /></td>

</tr>

</table>

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/bake/13493804.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2025-09-01
下一篇2025-09-01

发表评论

登录后才能评论

评论列表(0条)

    保存