Rumah > hujung hadapan web > html tutorial > 怎么用CSS来做无边框的表格?_html/css_WEB-ITnose

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Lepaskan: 2016-06-24 12:11:14
asal
1416 orang telah melayarinya

我用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>
Salin selepas log masuk


我改用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>
Salin selepas log masuk


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


回复讨论(解决方案)

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

td { padding:0; }
Salin selepas log masuk

<!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>
Salin selepas log masuk



楼主这个意思?

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

谢谢提供这个信息

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan