Heim >Web-Frontend >HTML-Tutorial >怎么用CSS来做无边框的表格?_html/css_WEB-ITnose

怎么用CSS来做无边框的表格?_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:11:141388Durchsuche

我用photoshop切片并输出页面,输出的页面是一个表格,里面包含了很多图片,但是改用CSS的无法做到无缝拼接

请帮助一下

photoshop输出的源代码: http://xyjsc.zisu.edu.cn/test2.htm

<table id="__01" width="500" height="500" border="0" cellpadding="0" cellspacing="0">	<tr>		<td colspan="3">			<img src="images/caonima_01.jpg" width="500"    style="max-width:90%" alt=""></td>	</tr>	<tr>		<td rowspan="2">			<img src="images/caonima_02.jpg" width="139"    style="max-width:90%" alt=""></td>		<td>			<img src="images/caonima_03.jpg" width="231"    style="max-width:90%" alt=""></td>		<td rowspan="2">			<img src="images/caonima_04.jpg" width="130"    style="max-width:90%" alt=""></td>	</tr>	<tr>		<td>			<img src="images/caonima_05.jpg" width="231"    style="max-width:90%" alt=""></td>	</tr></table>


我改用CSS后的页面: http://xyjsc.zisu.edu.cn/test1.htm
<table style="width:500px; height:500px; margin:0 auto; padding:0px; border-spacing:0px; border-style:none; border-collapse:collapse;">	<tr>		<td colspan="3">			<img src="images/caonima_01.jpg" width="500"    style="max-width:90%" alt="" /></td>	</tr>	<tr>		<td rowspan="2">			<img src="images/caonima_02.jpg" width="139"    style="max-width:90%" alt="" /></td>		<td>			<img src="images/caonima_03.jpg" width="231"    style="max-width:90%" alt="" /></td>		<td rowspan="2">			<img src="images/caonima_04.jpg" width="130"    style="max-width:90%" alt="" /></td>	</tr>	<tr>		<td>			<img src="images/caonima_05.jpg" width="231"    style="max-width:90%" alt="" /></td>	</tr></table>


最好是把style直接写在table里,以方便使用class,谢谢


回复讨论(解决方案)

楼主搜下 reset css 并引入进你的页面就可以了

td { padding:0; }

<!DOCTYPE HTML><html>	<head>		<meta charset="gb2312" />		<title></title>			<style>			table{				border-collapse:collapse;			}			td {				border:1px solid red;			}		</style>			</head>	<body>		<table>			<tr>				<td>-1-1-</td>				<td>-1-1-</td>				<td>-1-1-</td>			</tr>			<tr>				<td>-1-1-</td>				<td>-1-1-</td>				<td>-1-1-</td>			</tr>					</table>	</body></html>



楼主这个意思?

楼主搜下 reset css 并引入进你的页面就可以了

谢谢提供这个信息

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn