我有以下 css 位
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
text-align: center;
width: 25px;
}
我需要用 html 創建以下樣式頁面：
我怎樣才能實作它？
這是我的嘗試：
<table>
<td>1</td>
<td>2</td>
<td>4</td>
<tr>
<td>2</td>
<td>4</td>
<td>6</td>
<td>8</td>
</tr>
<tr>
<td>6</td>
<td>8</td>
<td>9</td>
</tr>
</table>
uj5u.com熱心網友回復：
td {
border: 1px solid black;
padding: 10px;
text-align: center;
}<table>
<tr>
<td>1</td>
<td colspan="2">2</td>
<td>4</td>
</tr>
<tr>
<td rowspan="3">2</td>
<td>4</td>
<td>6</td>
<td>8</td>
</tr>
<tr>
<td>6</td>
<td rowspan="2" colspan="2">9</td>
</tr>
<tr>
<td>8</td>
</tr>
</table>我認為它的結構有點錯誤，你也應該使用colspan和rowspan用于 TD。我也添加了一些css。
uj5u.com熱心網友回復：
有點晚了。@NicolaeMaties 已經正確地發誓了。方法很簡單，就是通過 col 和 rowspan。編號可以幫助您更好地理解這一點。原理也很容易理解：colspan="howManyColsMerged"和rowlspan="howManyRowsMerged"。
td {
padding: 20px;
text-align: center;
}<table border="1px">
<tr>
<td>1</td>
<td colspan="2">2</td>
<td>3</td>
<tr>
<td rowspan="3">4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td rowspan="2" colspan="2">9</td>
</tr>
<tr>
<td>10</td>
</tr>
</table>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/360128.html
下一篇：如何使覆寫整個頁面而不僅僅是視口