我正在使用 HTML 表格，需要實(shí)現(xiàn)類(lèi)似附加圖像的效果。當(dāng)我嘗試實(shí)現(xiàn)這一目標(biāo)時(shí)，我遇到了這樣的問(wèn)題① 我不知道如何不顯示邊框線。② 與期望結(jié)果相比，每個(gè)像元大小未對(duì)齊。我想以某種方式實(shí)現(xiàn)。如果您有任何意見(jiàn)，請(qǐng)告訴我。謝謝table {border-collapse:collapse; table-layout: fixed; text-align: center; width: 10rem; height: 10rem;}td {border:solid black 1px;}.noborder {}.noborder2{}<table> <tbody> <tr> <td class="noborder">Total (summary)</td> <td class="noborder"></td> <td class="noborder"></td> <td class="noborder"></td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> <td class="noborder2"></td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>6</td> </tr> </tbody></table>
1 回答
尚方寶劍之說(shuō)
TA貢獻(xiàn)1788條經(jīng)驗(yàn) 獲得超4個(gè)贊
您可以使用執(zhí)行類(lèi)似的操作empty-cells: hide;。
注意：但邊框有點(diǎn)關(guān)閉，因?yàn)樗鼊h除了內(nèi)容不存在的 td 邊框。如果可以的話。
.tbl {
empty-cells: hide;
border: 1px solid #999;
}
td {
background: #fff;
border: 1px solid #999;
padding: 10px 15px;
cursor: pointer;
}
<table class="tbl" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="noborder">Total (summary)</td>
<td class="noborder"></td>
<td class="noborder"></td>
<td class="noborder"></td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td class="noborder2"></td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>6</td>
</tr>
</tbody>
</table>
這是另一個(gè)版本：
.MainDiv {
border: 1px solid #999;
display: inline-block;
}
table.tbl {
empty-cells: hide;
}
td.noborder {
background: #fff;
border: 1px solid #999;
width: 50px;
height: 50px;
text-align: center;
}
td.removeBorder {
width: 100px;
height: 50px;
}
td:empty {
visibility: hidden;
}
<div class="MainDiv">
<table class="tbl" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td colspan="3" class="removeBorder">Total (summary)</td>
</tr>
<tr>
<td class="noborder">A</td>
<td class="noborder">B</td>
<td class="noborder">C</td>
<td class="noborder"></td>
</tr>
<tr>
<td class="noborder">1</td>
<td class="noborder">2</td>
<td class="noborder">3</td>
<td class="noborder">6</td>
</tr>
</tbody>
</table>
</div>
- 1 回答
- 0 關(guān)注
- 151 瀏覽
添加回答
舉報(bào)
0/150
提交
取消