[英]Keep a table header at top of grid when scrolling
我知道有多种写方法,我已经尝试过(固定),并且由于我不熟悉前端代码,因此我发现了这一挑战。 我发现将表标题放置在表本身中并将表主体放置在可滚动表-y中是可行的,但是我还需要根据用户的下拉选择将列对齐,如果可以避免的话会改善外观,但我尚未找到解决方法。
</div>
<div v-if="globals.showStructure === true" style="border:1px solid red; max-height:500px;overflow-y:scroll;position:top;" id="tableContainer2">
<!--<div v-if="globals.showStructure === true" style="max-height:500px;overflow-y:auto" id="tableContainer2">-->
<table class="table table-bordered">
<ul class="right-click-menu" tabindex="-1" v-if="globals.viewActiveStructMenu === true" ref="activeStructure">
<li v-on:click="deleteStructure()">Delete</li>
<li v-on:click="pendStructure()">Pend</li>
</ul>
<ul class="right-click-menu" tabindex="-1" v-if="globals.viewPendStructMenu === true" ref="pendStructure">
<li v-on:click="deleteStructure()">Delete<li>
<li v-on:click="activateStructure()">Activate</li>
</ul>
<thead>
<tr>
<th style="width: 36px;" v-if="globals.showActiveToPendCheckbox == true" >Pend </th>
<th style="width: 38px;" v-if="globals.showActivateCheckbox == true" > Activate </th>
<th style="width: 58px;" v-if="globals.showDeleteCheckbox == true" > Delete </th>
<th style="width: 48px;" data-toggle="tooltip" title="Super Summary Code">Sup Sum Code</th>
<th style="width: 80px;" data-toggle="tooltip" title="Super Summary Description"> Sup Sum Code Desc</th>
<th style="width: 48px;" data-toggle="tooltip" title="Summary Code">Sum Code</th>
<th style="width: 122px;" data-toggle="tooltip" title="Summary Code Description">Sum Code Desc</th>
<th style="width: 115px;" data-toggle="tooltip" title="Family Code">Fam Code</th>
<th style="width: 81px;" data-toggle="tooltip" title="Secondary Code">Sec Code</th>
<th style="width: 180px;" data-toggle="tooltip" title="Trade Item Description">GTIN Desc</th>
<th style="width: 82px;" data-toggle="tooltip" title="GTIN">GTIN</th>
<th style="width: 40px;" data-toggle="tooltip" title="Status">Status</th>
<th v-if="globals.showEditColumn == true" style="width: 50px;" title='Edit'>Edit</th>
</tr>
</thead>
<tbody>
<tr v-on:mousedown="rowStructClick(fcStructureItem.gtin,false)" v-for="(fcStructureItem, index) in filteredFamilyCodeStructure"
:key="fcStructureItem.gtin"
:id="fcStructureItem.gtin"
:form.fcStructure="form.fcStructure" tabindex="-1" v-on:contextmenu="openStructMenu($event)"
:class = "alterRowColors(index)">
<td v-if="globals.showActiveToPendCheckbox == true">
<input type="checkbox" v-model="activeToPendSelected" :value="fcStructureItem.gtin" number>
</input>
</td>
<td v-if="globals.showActivateCheckbox == true">
<input type="checkbox" v-model="activateSelected" :value="fcStructureItem.gtin" number>
</input>
</td>
<td v-if="globals.showDeleteCheckbox == true">
<input type="checkbox" v-model="deleteSelected" :value="fcStructureItem.gtin" number>
</input>
</td>
<td>
<span >{{ fcStructureItem.superSummaryCd }}</span>
</td>
<td>
<span >{{ fcStructureItem.superSummaryDesc }}</span>
</td>
<td>
<span >{{ fcStructureItem.summaryCd }}</span>
</td>
<td>
<span >{{ fcStructureItem.summaryDesc }}</span>
</td>
<td>
<span>{{ fcStructureItem.couponFamilyCode }}</span>
</td>
<td>
<span>{{ fcStructureItem.oldCouponFamilyCode }}</span>
</td>
<td>
<span >{{ fcStructureItem.tradeItemDescription }}</span>
</td>
<td>
<span >{{ fcStructureItem.gtin }}</span>
</td>
<td>
<span >{{ fcStructureItem.status }}</span>
</td>
<div v-if="globals.showEditButton == true" >
<td>
<span>
<button class="btn btn-primary" title="edit structure item" v-on:click="editStructure(fcStructureItem)">
<span> Edit </span>
</button>
</span>
</td>
</div>
</tr>
</tbody>
</table>
</div>
<table id="PlaceHolder2" class="table table-bordered"></table>
<!-- new grid code is between here>-->
</div>
如果需要,在此处输入CSS的帮助将非常有用。
我以前已经解决了此问题,该问题具有固定的表布局CSS(或者宽度只能增加1列),并且您要创建一对表。 一个只有标题,另一个只有行,并且在可滚动的DIV中。 不可否认,这是10年前与IE6兼容的产品...
这些天,只要<tr>
在内部,您就应该能够为<tbody>
设置CSS使其具有overflow-x:none
和overflow-y:scroll
(如果没有带有短数据列表的滚动条,则可以自动设置)您的<tbody>
(已编辑以添加code tag
格式以阻止html标签从文本中消失!)
您可以使用新的position: sticky
属性。 当页面在表格标题上滚动时,它将停留在页面顶部并停留在该位置。
为此,您必须定义一个top
值,该值指定偏移量(可能为0)
但是请注意,粘性并不是在所有浏览器中都有效,在表格中尤其如此: https : //caniuse.com/#feat=css-sticky
thead { /* position: sticky; and top: 0; are the only needed properties here. The rest is for showcase only. */ position: sticky; top: 0; background: red; } th { width: 300px; height: 50px; } td { border: 1px solid yellow; height: 200px }
<table> <thead> <tr> <th>A</th> <th>B</th> <th>C</th> </tr> </thead> <tbody> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> </tbody> </table>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.