我花了一個多小時才創建一個 HTML 表格。我不明白為什么它不起作用或者我應該如何組合行跨度、列跨度。如果您能幫助我，我將非常感激您：我嘗試了以下方法，全部失敗，有些還破壞了我以前的模板：td { border: 2px solid; height: 100px; width: 100px;}<table> <tr> <td rowspan="5"></td> <td rowspan="5"></td> </tr> <tr> <td rowspan="3"></td> <td rowspan="3"></td> </tr> <tr> <td rowspan="3"></td> <td rowspan="3"></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr></table>
5 回答
慕森王
TA貢獻1777條經驗 獲得超3個贊
請嘗試以下操作：
table { border-collapse: collapse; }
td {
border: 2px solid black;
height: 100px;
width: 100px;
}
<table>
<tr>
<td rowspan="2">A</td>
<td rowspan="2">A</td>
<td>B</td>
<td>B</td>
<td>C</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>C</td>
</tr>
</table>
慕姐8265434
TA貢獻1813條經驗 獲得超2個贊
我不知道為什么你使用 5 和 3 的行跨度，但它的工作方式是
您指定行跨度或列跨度并填充單元格網格
<table>
<tr>
<td rowspan="5">a</td>
<td rowspan="5">b</td>
<td rowspan="3">c</td>
<td rowspan="3">d</td>
<td rowspan="3">e</td>
</tr>
意味著我們有 5 列和 5 行（到目前為止）
+-+-+-+-+-+
|X|X|X|X|X| row 1
+-+-+-+-+-+
|X|X|X|X|X| row 2
+-+-+-+-+-+
|X|X|X|X|X| row 3
+-+-+-+-+-+
|X|X| | | | row 4
+-+-+-+-+-+
|X|X| | | | row 5
+-+-+-+-+-+
第 2 行和第 3 行不需要單元格（no <td>s），因為它們已經由第一行指定。
第 4 行需要 3 個<td>用于 3 個未使用的單元格
<tr>
<td rowspan="2">g</td>
<td rowspan="2">h</td>
<td rowspan="2">i</td>
</tr>
網格現在已滿
+-+-+-+-+-+
|X|X|X|X|X| row 1
+-+-+-+-+-+
|X|X|X|X|X| row 2
+-+-+-+-+-+
|X|X|X|X|X| row 3
+-+-+-+-+-+
|X|X|X|X|X| row 4
+-+-+-+-+-+
|X|X|X|X|X| row 5
+-+-+-+-+-+
所以第 5 行不需要單元格（沒有<td>s）
table { border-collapse: collapse; }
td {
border: 2px solid;
height: 100px;
width: 100px;
text-align: center;
}
<table>
<tr>
<td rowspan="5">a</td>
<td rowspan="5">b</td>
<td rowspan="3">c</td>
<td rowspan="3">d</td>
<td rowspan="3">e</td>
</tr>
<tr></tr>
<tr></tr>
<tr>
<td rowspan="2">g</td>
<td rowspan="2">h</td>
<td rowspan="2">i</td>
</tr>
<tr></tr>
</table>
DIEA
TA貢獻1820條經驗 獲得超2個贊
這應該非常接近您想要實現的目標。重要的部分是 border-collapse、rowspan、td 寬度、border 寬度、using class。這是實現這一目標的多種方法之一。
td {
border: 4px solid;
height: 100px;
width: 50px;
}
table {
border-collapse: collapse;
}
.larger-width{
width: 75px;
}
<table>
<tr>
<td rowspan='2' class="larger-width"></td>
<td rowspan='2' class="larger-width"></td>
<td></td>
<td></td>
<td></td>
<td class="larger-width"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
蝴蝶不菲
TA貢獻1810條經驗 獲得超4個贊
[
慕碼人2483693
TA貢獻1860條經驗 獲得超9個贊
嘗試這個解決方案，根據需要進行修改。
<table width="346" height="200" border="1">
<tbody>
<tr>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
- 5 回答
- 0 關注
- 266 瀏覽
添加回答
舉報
0/150
提交
取消