I've been troubled for a long time, and I hope to solve the spacing problem of -tr_html/css

I've been troubled for a long time, and I hope to solve the spacing problem of -tr_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:05:50

Original

1366 people have browsed it

Spacing between tr
Whether you use css, html, or even js,
How to make the top and bottom of tr have a spacing?
(Don’t use the method of nesting tables in td)
Just want this effect

Reply to the discussion (solution)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>table{margin:0;padding:0;border-collapse:collapse;}td,th{border:solid 1px #ccc; width:100px;}.noborder{border:none;height:5px;overflow:hidden;}</style></head><body><table>	<tr>    	<th>姓名</th>        <th>学号</th>        <th>性别</th>        <th>年龄</th>    </tr>    <tr>    	<td>小马</td>        <td>00001</td>        <td>男</td>        <td>20</td>    </tr>    <tr>    	<td colspan="4" class="noborder"></td>    </tr>    <tr>    	<td>小李</td>        <td>00002</td>        <td>男</td>        <td>20</td>    </tr>     <tr>    	<td colspan="4" class="noborder"></td>    </tr>    <tr>    	<td>小张</td>        <td>00003</td>        <td>男</td>        <td>22</td>    </tr></table></body></html>

Copy after login

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>table{margin:0;padding:0;border-collapse:collapse;}td,th{border:solid 1px #ccc; width:100px;}.noborder{border:none;height:5px;overflow:hidden;}</style></head><body><table>	<tr>    	<th>姓名</th>        <th>学号</th>        <th>性别</th>        <th>年龄</th>    </tr>    <tr>    	<td>小马</td>        <td>00001</td>        <td>男</td>        <td>20</td>    </tr>    <tr>    	<td colspan="4" class="noborder"></td>    </tr>    <tr>    	<td>小李</td>        <td>00002</td>        <td>男</td>        <td>20</td>    </tr>     <tr>    	<td colspan="4" class="noborder"></td>    </tr>    <tr>    	<td>小张</td>        <td>00003</td>        <td>男</td>        <td>22</td>    </tr></table></body></html>

Copy after login

Is there no other way? Is there no way to set it up directly? Please reply, I’ll leave it alone if you don’t want to post it

Since you are using tables, there is generally a principle in CSS that you will not add styles to tags other than td and th. This will still cause compatibility issues. There are quite a lot, so the distance between rows is best filled with blank rows, that is, merging cells

Since you use tables, there is generally a principle in CSS , will not add styles to labels other than td, th, which brings a lot of compatibility issues. Therefore, it is best to fill the spacing between rows with blank rows, that is, merge cells

Thank you