> 웹 프론트엔드 > HTML 튜토리얼 > 长期困扰,望解答-tr的间距问题_html/css_WEB-ITnose

长期困扰,望解答-tr的间距问题_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 12:05:50
원래의
1409명이 탐색했습니다.

tr的间距
无论用css,还是html,甚至js都可以,
如何能让tr的上下有间距?
(不要用td里再套table的方式)
就是要这个效果


回复讨论(解决方案)

<!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>
로그인 후 복사
로그인 후 복사

<!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>
로그인 후 복사
로그인 후 복사


除此之外再无他法了吗?没有能直接设置的办法吗?请回复下,没有我就结贴了

既然你用了表格,那么在css中一般有个原则,不会给除了 td,th外的标签加样式,带来的兼容问题还是挺多的,因此行与行之间的间隔距离,最好还是利用空行填充,也就是合并单元格

既然你用了表格,那么在css中一般有个原则,不会给除了 td,th外的标签加样式,带来的兼容问题还是挺多的,因此行与行之间的间隔距离,最好还是利用空行填充,也就是合并单元格


谢谢
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿