2016-11-25 99 views
0

如何合併兩個空白單元(上面'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; 
} 
+1

你不能。您只能合併單元格以形成矩形(或方形)區域。您可以合併氫氣和氦氣之間的行,然後合併鈹,硼,鎂和鋁之間的正方形。或者,您可以對氫氣和氦氣旁邊的兩個小方格進行造型,使它們分別沒有右邊框和左邊框。 – enhzflep

回答

1

結構上,你不能......但CSS,你可以做到這一點出現,這裏是你的 「唯一視覺」 的解決方案:

https://jsfiddle.net/fe74c5cq/

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

看看css部分,頂部的這三個類製作了這個技巧(顯然我把它放在了正確的元素中),你應該知道你在自然表中看到的邊界似乎是所有「單一」邊界,但是當它們位於一個單元格與另一個單元格之間時,它們是兩次!

您會看到一個「單個」邊框,因爲在CSS中,對於使用「摺疊」值進行了設置的表,會有一個屬性「border-collapse」。

所以,當你想讓邊框消失時,你必須把它從所有相鄰的元素中拿走。