HTML中的表td和tr的行分隔符
[英]line separator with table td and tr in HTML
问题描述
i want to put line separator in html table like this : a Black line Z shape "mirror image" as you see below , i tried to set last left side td and first right side td border but i am not able think that how could i dram vertical line 
我想像这样在html表中放置行分隔符： 黑色线Z形“镜像”，如下所示，我试图设置最后一个左侧的td和第一个右侧的td边框，但是我无法想到德拉姆垂直线
i tried this:- 我试过了：-
<table style="width: 100%">
<tr>
<td colspan="2" style="text-align: right">
<!--<img src=""/>-->
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center">
<label style="font-size: 26px; color: #1513CB">Register To Brand</label>
</td>
</tr>
<tr>
<td>
<div>
<div style="font-size: 20px; color: #1513CB">Welcome!</div>
<div style="font-size: 18px; color: black">Dr John.G.Doe Phd</div>
</div>
</td>
<td style="border-bottom: 1px solid black"></td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<img src="Images/TabScore1.png" width="25" height="25" /></td>
<td>
<img src="Images/TabScore1.png" width="25" height="25" /></td>
<td></td>
</tr>
</table>
</td>
<td>
<input type="text" /></td>
</tr>
<tr>
<td >
<input type="text" /></td>
<td>
<input type="text" /></td>
</tr>
<tr>
<td >
<input type="text" /></td>
<td>
<input type="text" /></td>
</tr>
<tr>
<td style="border-bottom: 1px solid black";">
<input type="text" /></td>
<td>
<input type="text" /></td>
</tr>
</table>
2 个解决方案
解决方案1
1 已采纳 2013-01-28 13:00:33
You are on the right track. 您走在正确的轨道上。 You just have to add some more border-X styles andset border-collapse: collapse for the table element. 您只需要添加一些border-X样式并设置border-collapse: collapse table元素即可border-collapse: collapse 。
Also note, that in general the border of the right cells will overwrite the border of their left siblings. 还要注意，通常，右单元格的边界将覆盖其左兄弟姐妹的边界。 Same goes for bottom cells overwriting the border of top "siblings" (not really siblings here, I know, but you get the picture ...). 覆盖顶部“兄弟姐妹”边界的底部单元格也是如此（我知道这里不是真正的兄弟姐妹，但是您知道了……）。
<table style="width: 100%; border-collapse: collapse;">
<tr>
<td colspan="2" style="text-align: right">
<!--<img src=""/>-->
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center">
<label style="font-size: 26px; color: #1513CB">Register To Brand</label>
</td>
</tr>
<tr>
<td>
<div>
<div style="font-size: 20px; color: #1513CB">Welcome!</div>
<div style="font-size: 18px; color: black">Dr John.G.Doe Phd</div>
</div>
</td>
<td></td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<img src="Images/TabScore1.png" width="25" height="25" /></td>
<td>
<img src="Images/TabScore1.png" width="25" height="25" /></td>
<td></td>
</tr>
</table>
</td>
<td style="border-top: 1px solid black; border-left: 1px solid black;">
<input type="text" /></td>
</tr>
<tr>
<td >
<input type="text" /></td>
<td style="border-left: 1px solid black;">
<input type="text" /></td>
</tr>
<tr>
<td >
<input type="text" /></td>
<td style="border-left: 1px solid black;">
<input type="text" /></td>
</tr>
<tr>
<td style="border-bottom: 1px solid black";">
<input type="text" /></td>
<td style="border-left: 1px solid black;">
<input type="text" /></td>
</tr>
</table>
解决方案2
0
You need to collapse the table to remove the default spacing of td s , eg, table-collapse: collapse; 您需要折叠表格以删除td的默认间距，例如table-collapse: collapse; . 。 Then simply add a border-right: solid 1px; 然后只需添加一个border-right: solid 1px; on every first td on the left side of the table. 在表格左侧的每个第一个td上。
<html>
<head></head>
<body>
<table style="width: 100%; border-collapse: collapse;">
<tbody>
<tr>
<td colspan="2" style="text-align: right;">
<!--<img src=""/>-->
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center">
<label style="font-size: 26px; color: #1513CB">Register To Brand</label>
</td>
</tr>
<tr>
<td>
<div>
<div style="font-size: 20px; color: #1513CB">Welcome!</div>
<div style="font-size: 18px; color: black">Dr John.G.Doe Phd</div>
</div>
</td>
<td style="border-bottom: 1px solid black"></td>
</tr>
<tr>
<td style="border-right: solid 1px;">
<table>
<tbody>
<tr>
<td>
<img src="Images/TabScore1.png" width="25" height="25" />
</td>
<td>
<img src="Images/TabScore1.png" width="25" height="25" />
</td>
<td></td>
</tr>
</tbody>
</table>
</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td style="border-right: solid 1px;">
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td style="border-right: solid 1px;">
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td style="border-bottom: 1px solid black;border-right: solid 1px;">
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
</tbody>
</table>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.