問題描述
引導表拆分單元格 (Bootstrap table split cells)
我發生了以下奇怪的事情。我有下表:
<table border="1" cellpadding="1" cellspacing="1" class="table">
<tbody>
<tr>
<td colspan="2">Паша</td>
</tr>
<tr>
<td>Паша</td>
<td>Паша 2</td>
</tr>
</tbody>
只要我不添加 boostrap 表類,它就可以正常工作。沒有類,它看起來像這樣:
但是一旦我添加了引導表類,它看起來像這樣
<table border="1" cellpadding="1" cellspacing="1" class="table">
<tbody>
<tr>
<td colspan="2">Паша</td>
</tr>
<tr>
<td>Паша</td>
<td>Паша 2</td>
</tr>
</tbody>
知道這裡發生了什麼嗎?
PS 抱歉,在我的國家/地區看不到圖片(可能是某個街區?)。添加這些以供參考。
此處未正確顯示的圖片是沒有 boostrap 的鏈接 ‑ https://ikeen.com/img/blog/t1.jpg 使用引導程序 ‑ https://ikeen.com/img/blog/t2.jpg
參考解法
方法 1:
I cannot figure out what is the exact reason for that strange behavior. Perhaps, It might be the problem with the bootstrap version that you set up locally. Try to update it or use CDN. You can find them at https://getbootstrap.com/docs/4.6/getting‑started/download/
I used bootstrap 4.6.0
as below and it worked fine.
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
</head>
<body>
<table class="table table‑bordered">
<tbody>
<tr>
<td colspan="2">Паша</td>
</tr>
<tr>
<td>Паша</td>
<td>Паша 2</td>
</tr>
</tbody>
</table>
</body>
方法 2:
I don't know how and why but this seems to work. I think there is a problem with tag in bootstrap
<table class="table table‑hover">
<tbody>
<tr>
</tr>
</tbody>
<tbody>
<tr>
<td colspan="2">Безлимитный интернет на скорости 40 Мбит в секунду</td>
</tr>
<tr>
<td>Всего за 4500 тенге в месяц</td>
<td>Оборудование в подарок</td>
</tr>
</tbody>