How to make a borderless table using CSS? _html/css

How to make a borderless table using CSS? _html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:11:14

Original

1354 people have browsed it

I use photoshop to slice and output the page. The output page is a table, which contains many pictures, but using CSS cannot achieve seamless splicing.

Please help

Source code output by 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" height="161" alt=""></td>	</tr>	<tr>		<td rowspan="2">			<img src="images/caonima_02.jpg" width="139" height="339" alt=""></td>		<td>			<img src="images/caonima_03.jpg" width="231" height="178" alt=""></td>		<td rowspan="2">			<img src="images/caonima_04.jpg" width="130" height="339" alt=""></td>	</tr>	<tr>		<td>			<img src="images/caonima_05.jpg" width="231" height="161" alt=""></td>	</tr></table>

Copy after login

The page after I switched to 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" height="161" alt="" /></td>	</tr>	<tr>		<td rowspan="2">			<img src="images/caonima_02.jpg" width="139" height="339" alt="" /></td>		<td>			<img src="images/caonima_03.jpg" width="231" height="178" alt="" /></td>		<td rowspan="2">			<img src="images/caonima_04.jpg" width="130" height="339" alt="" /></td>	</tr>	<tr>		<td>			<img src="images/caonima_05.jpg" width="231" height="161" alt="" /></td>	</tr></table>

Copy after login

It is best to write the style directly in the table to facilitate the use of classes, thank you

Reply to the discussion (solution)

Just search reset css and import it into your page

td { padding:0; }

Copy after login

<!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>

Copy after login

What does the original poster mean?

Just search reset css and import it into your page

Thank you for providing this information