我正在使用 HTML 表格，需要實現類似附加圖像的效果。當我嘗試實現這一目標時，我遇到了這樣的問題① 我不知道如何不顯示邊框線。② 與期望結果相比，每個像元大小未對齊。我想以某種方式實現。如果您有任何意見，請告訴我。謝謝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 回答
尚方寶劍之說
TA貢獻1788條經驗 獲得超4個贊
您可以使用執行類似的操作empty-cells: hide;。
注意：但邊框有點關閉，因為它刪除了內容不存在的 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>
這是另一個版本：
.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 關注
- 129 瀏覽
添加回答
舉報
0/150
提交
取消