Home > Article > Web Front-end > How to make a borderless table using CSS? _html/css_WEB-ITnose
How to make a borderless table using CSS? _html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:11:141349browse
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>
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>
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; }
<!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> What does the original poster mean?
Just search reset css and import it into your page
Thank you for providing this information
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn