thead的寬度不同於tbody

我需要一個帶滾動的tbody，並且thead不應該有滾動。所以在這樣做的時候，thead的寬度會減小到thead中文本的大小。thead的寬度不同於tbody

有沒有一種方法，使THEAD寬度尺寸相同的tbody

這就是我。 https://jsfiddle.net/Viraj173/jqwgkq8k/

CSS

tbody.scroll{ 
    overflow-y: auto; 
    height:100px;   
position: absolute; 
} 

th { 
    color: #ffffff; 
    background: #373d49; 
    padding: 5px; 
    text-align: left; 
    font-size: 14px; 
}

HTML

<table > 
    <thead> 
     <tr> 
     <th> 
      Value 
     </th> 
     </tr>        
    </thead> 
    <tbody class="scroll"> 
    <tr> 
     <td> 
     Setting Value 1 
     </td> 
    </tr> 
    <tr> 
     <td> 
     Setting Value 1 
     </td> 
    </tr> 
    <tr> 
     <td> 
     Setting Value 1 
     </td> 
    </tr> 
    <tr> 
     <td> 
     Setting Value 1 
     </td> 
    </tr> 
    <tr> 
     <td> 
     Setting Value 1 
     </td> 
    </tr> 
    <tr> 
     <td> 
     Setting Value 1 
     </td> 
    </tr> 
    <tr> 
     <td> 
     Setting Value 1 
     </td> 
    </tr> 
    <tr> 
     <td> 
     Setting Value 1 
     </td> 
    </tr> 
    <tr> 
     <td> 
     Setting Value 1 
     </td> 
    </tr> 

    </tbody> 
</table>

來源

2017-01-24 Viraj Talaty

我添加靜態寬度在桌子上，THEAD並在CSS的，你已經將它設置爲位置TBODY：絕對的; https://jsfiddle.net/jqwgkq8k/1/ – Gezzasa

是的，你可以給在<thead>部分<th>標籤寬度值。試試這個：

<thead> 
     <tr> 
     <th width="108px" > 
      <center> Value</center> 
     </th> 
     </tr>      
    </thead>

這樣的：http://codepen.io/anon/pen/QdgJbg

，或者你可以在CSS只需編輯是這樣的：

tbody.scroll{ 
     overflow-y: auto; 
     height:20vh;   
     position: relative; 
     display: block; 
    } 

    th { 
     color: #ffffff; 
     background: #373d49; 
     padding: 5px; 
     width:110px; 
     text-align: left; 
     text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); 
     font-size: 14px; 
     wight:20vh; 
    }

http://codepen.io/anon/pen/dNRwWW

來源

2017-01-24 11:01:29 Akydev

使用這樣的：

th { 
    color: #ffffff; 
    background: #373d49; 
    padding: 5px; 
    padding-right:100px; 
    text-align: center; 
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); 
    font-size: 14px; 
}

來源

2017-01-24 11:04:58

你不應該使用填充彌補丟失的寬度。改變TH內的副本將改變寬度。 – Gezzasa

:)只適用於這種情況 –

這之後我修改了代碼

tbody.scroll{ 
    overflow-y: auto; 
    height:20vh;   
    position: relative; 
    display: block; 
}

https://jsfiddle.net/5ya1c55x/

來源

2017-01-24 11:10:27 rifa29

在添加一個列時，它不起作用，因爲滾動位於第一列旁邊。 –

你的意思是你在tbody上添加該列嗎？ – rifa29

你的目標是什麼？看看這個https://jsfiddle.net/3jk8m02q/ 我在tbody上添加了第二列，並且在第二列之後出現了滾動 – rifa29

thead的寬度不同於tbody

回答

相關問題