表のセルをHTMLの「T」字形にマージするにはどうすればよいですか？

2つの空白セル（「Be」の上に1つ、「B」の上に1つ）を真ん中に大きな空白をマージするにはどうすればよいですか？私は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

できません。セルをマージするだけで、長方形（または正方形）の領域を形成することができます。あなたは水素とヘリウムの間の行を併合し、続いてベリリウム、ホウ素、マグネシウムとアルミニウムの間の四角形を合併することができます。あるいは、水素とヘリウムの隣にある2つの小さな四角形を、それぞれ右の境界線と左の境界線を持たないようにスタイルすることもできます。 – enhzflep

構造的にすることはできません...しかし、あなたが行うことができますCSSでそれが表示され、ここにあるあなたの "唯一のビジュアル" ソリューション：

https://jsfiddle.net/fe74c5cq/

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

CSSセクションを見て頂くと、これらの3つのクラスがトリックになりました（明らかに私はそれを正しい要素に入れました）。あなたは自然な表に見える境界線がすべての「単一の」境界線ですが、代わりに、セルと別のセルの間にあるときは、2度です。

"single"ボーダーが表示されるのは、CSSに "collapse"値で賞味されたテーブルの「border-collapse」というプロパティがあるからです。

境界線が表示されないようにするには、隣接するすべての要素から離してください。

出典

2016-11-25 18:50:18 Sycraw

表のセルをHTMLの「T」字形にマージするにはどうすればよいですか？

答えて

関連する問題