如何在HTML中将表单元格合并为“T”形状？

如何合并两个空白单元（上面'Be'和上面'B'之一），中间有大空格？我以不同的方式尝试了colspan和rowspan，但仍不知道如何去做。 https://i.stack.imgur.com/tw5SE.png 如何在HTML中将表单元格合并为“T”形状？

我的代码：

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<link rel="stylesheet" href="ex10.css"> 
</head> 
<body> 
<table style="width:800px;"> 
<tr class="tr1"> 
<th>I</th> 
<th>II</th> 
<th>III</th> 
<th>IV</th> 
<th>V</th> 
<th>VI</th> 
<th>VII</th> 
</tr> 
<tr class="tr2"> 
<td>H</td> 
<td class="tr1"></td> 
<td colspan="3" rowspan="3"></td> 
<td></td> 
<td>He</td> 
</tr> 
<tr> 
<td>Li</td> 
<td>Be</td> 
<td>B</td> 
<td>Ne</td> 
</tr> 
<tr class="tr4"> 
<td>Na</td> 
<td>Mg</td> 
<td>Al</td> 
<td>Ar</td> 
</tr> 
<tr class="tr5"> 
<td>K</td> 
<td>Ca</td> 
<td>Sc</td> 
<td>Ti</td> 
<td>V</td> 
<td>Ga</td> 
<td>Kr</td> 
</tr> 
</table> 
</body> 
</html>

CSS：

table, th, td { 
border: 1px solid black; 
border-collapse: collapse; 
} 

.tr1, th{ 
color: red; 
width: 110px; 
} 

td{ 
width: 110px; 
height: 54px; 
text-align: center; 
font-weight: bold; 
font-family: Calibri; 
} 

td:first-child { 
background-color: #b4eba8; 
} 

td:nth-child(2):not(.tr1){ 
background-color: #76f9fd; 
} 

td:last-child{ 
background-color: #fadb47; 
}

来源

2016-11-25 Patricia Wanat

你不能。您只能合并单元格以形成矩形（或方形）区域。您可以合并氢气和氦气之间的行，然后合并铍，硼，镁和铝之间的正方形。或者，您可以对氢气和氦气旁边的两个小方格进行造型，使它们分别没有右边框和左边框。 – enhzflep

结构上，你不能......但CSS，你可以做到这一点出现，这里是你的 “唯一视觉” 的解决方案：

https://jsfiddle.net/fe74c5cq/

.bigtd{ 
    border:none; 
} 
.tdForT 
{ 
    border-left:none; 
} 
.tr1{ 
    border-right:none; 
}

看看css部分，顶部的这三个类制作了这个技巧（显然我把它放在了正确的元素中），你应该知道你在自然表中看到的边界似乎是所有“单一”边界，但是当它们位于一个单元格与另一个单元格之间时，它们是两次！

您会看到一个“单个”边框，因为在CSS中，对于使用“折叠”值进行了设置的表，会有一个属性“border-collapse”。

所以，当你想让边框消失时，你必须把它从所有相邻的元素中拿走。

来源

2016-11-25 18:50:18 Sycraw

如何在HTML中将表单元格合并为“T”形状？

回答

相关问题