引導表拆分單元格 (Bootstrap table split cells)


問題描述

引導表拆分單元格 (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 表類,它就可以正常工作。沒有類,它看起來像這樣:

enter image description here

但是一旦我添加了引導表類,它看起來像這樣

<table border="1" cellpadding="1" cellspacing="1" class="table">
<tbody>
    <tr>
        <td colspan="2">Паша</td>
    </tr>
    <tr>
        <td>Паша</td>
        <td>Паша 2</td>
    </tr>
</tbody>

enter image description here

知道這裡發生了什麼嗎?

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>

(by UndryBK94Undry)

參考文件

  1. Bootstrap table split cells (CC BY‑SA 2.5/3.0/4.0)

#bootstrap-4 #html






相關問題

在不同選項卡上時如何隱藏特定選項卡 (How to hide specific tab when on different tab)

如何將引導程序 4 中的內容連續居中? (How to center in bootstrap 4 the content in a row?)

構建 JavaScript 時缺少模塊 (Missing Module When Building JavaScript)

React-Bootstrap 選項卡 defaultActiveKey 不隨 stateChange 改變 (React-Bootstrap Tabs defaultActiveKey is not changing with stateChange)

表格內容的對齊方式 (alignment of the content in table)

切換器圖標無法調整導航欄寬度 (Toggler icon does not working on adjusting the navbar width)

如何根據設備大小使用屏幕 (How to use the screens based on the device size)

如何在引導程序 4 中為 col 調整大小設置動畫? (How to animate col resize in bootstrap 4?)

html頁面Bootstrap頂部的白條 (White bar at top of html page Bootstrap)

如何從 reactstrap 輸入覆蓋表單控制類? (How can I override form-control class from a reactstrap input?)

文檔似乎沒有變化,但為什麼寬度在 Bootstrap 4 和 5 之間給出不同的圖像比例? (It seems to be no change in docs, but why does width give different image scale between Bootstrap 4 and 5?)

引導表拆分單元格 (Bootstrap table split cells)







留言討論