如何在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」形狀？

回答

相關問題