I try to set position sticky for the below table with no luck
the below table is inside parents dev I try to give it Height and remove overflow:hidden or change it to overflow:auto also with no luck
div id="app" class="jsgrid" style="position: relative; width: 100%; padding:10px;">
<div class="action-bnts" v-if="Exports == false">
<button :disabled="TotalcountUndo === 0 || EnableUndoRedo === false" style="margin-bottom:10px;" v-on:click="undofunc()" type="button" id="Undobtn" class="btn btn-secondary btn-ft">Undo</button>
<button :disabled="TotalcountRedo === 0 || EnableUndoRedo === false" style="margin-bottom:10px;" v-on:click="Redofunc()" type="button" id="Redo" class="btn btn-secondary btn-ft">Redo</button>
<button style="margin-bottom:10px;" v-on:click="exports" type="button" class="btn btn-secondary btn-ft">Exports and preview</button>
</div>
<div class="main-grid" >
<div class="jsgrid-grid-header jsgrid-header-scrollbar" style=" overflow-y: hidden !important;">
<table class="jsgrid-table">
<tr class="jsgrid-header-row" ref="myColid" :disabled="EnableUndoRedo === false">
<th v-for="(colo, coindex) in ColumnTemp" :class='"jsgrid-header-cell jsgrid-header-sortable filtered" + coindex' width="150px" v-show="coindex != 0 && coindex != 2" :key="colo" v-bind:style="{backgroundColor:colo.Color}" :colspan="colo.collapan">
<div style="float: left;display:none" :class="'coindex'+ coindex" v-if="coindex != 1">
<input class="jsgrid-button jsgrid-cancel-edit-button" type="button" title="Close Editor" v-on:click="bluretext('coindex'+ coindex)" />
<input type="color" :id="'Color'+ coindex" />
<input class="btn btn-secondary btn-ft" type="button" :id="'colorButton'+ coindex" value="change Color" v-on:click="changeColorColumn('Color'+ coindex , coindex )" />
<textarea type="text" v-model="ColumnTemp[coindex].Name"
placeholder="Default" :name="'columnindex'+ coindex"></textarea>
</div>
<div class="row" v-if="coindex != 1">
<div :id="'coindex' + coindex">
<p v-on:click='SwapText("coindex" + coindex , coindex)' v-html="ColumnTemp[coindex].Name" style="font-size:24px;color:black;font-family:Arial"></p>
<input style="margin:0" class="jsgrid-button jsgrid-cancel-edit-button" type="button" title="Delete Column" v-on:click="deleteCol(coindex, colo)" />
<input style="margin:0" class="jsgrid-button jsgrid-mode-button jsgrid-insert-mode-button" type="button" title="Add Substage" v-on:click="AddSubstage(coindex, colo)" />
</div>
</div>
<p v-if="coindex ===1">Description</p>
</th>
<th class="jsgrid-header-cell jsgrid-control-field jsgrid-align-center col" style="width:150px;">
<span class="jsgrid-header-span">
Add Stage
</span>
<button :disabled="EnableUndoRedo === false" type='button' class="jsgrid-button jsgrid-mode-button jsgrid-insert-mode-button" v-on:click="addNewCol">
</button>
</th>
</tr>
<tr class="jsgrid-row" ref="myTitid">
<td v-for="(Tit, TIndex) in Titles" :class='"jsgrid-cell col filTitle" + TIndex' style="width:150px;" v-show="TIndex != 0 && TIndex != 2" :key="Tit" v-bind:style="{backgroundColor:Tit.Color}">
<div :class="'keyyTitle'+ TIndex" style="display:none">
<input class="jsgrid-button jsgrid-cancel-edit-button" type="button" title="Close Editor" v-on:click="bluretextTitle('keyyTitle'+ TIndex)" />
<input type="color" :id="'ColorTitle'+ TIndex" />
<input class="btn btn-secondary btn-ft" type="button" :id="'colorTitleButton'+ TIndex" value="change Color" v-on:click="changeColorTitle('ColorTitle'+ TIndex , TIndex)" />
<input v-if="TIndex != 1" v-on:focus='AddTitlesHistory(Titles)' v-on:change='AddTitlesundoHistory()' type="text" v-model="Titles[TIndex].Name" value="Title" />
</div>
<div :id="'keyyTitle'+ TIndex">
<p v-if="TIndex != 1 " value="Default" v-on:click="SwapTextTitle('keyyTitle'+ TIndex)">{{Titles[TIndex].Name}}</p>
</div>
<div :id="'keyyTitle'+ TIndex">
<input v-if="((ColSpan[TIndex] != '' && ColSpan[TIndex] > 1) || (ParentSpan[TIndex] !='') ) && TIndex != 1" style="margin:0" class="jsgrid-button jsgrid-cancel-edit-button" type="button" title="Delete SubStage" v-on:click="deleteSubStage(Tit , TIndex)" />
</div>
</td>
</tr>
<tbody ref="myid" :disabled="EnableUndoRedo === false">
<tr class="jsgrid-alt-row" v-for="(invoice_product, k) in Rows" :key="invoice_product">
<td class="jsgrid-cell" style="width: 300px;" v-for="(column, indexColumn) in columns" :key="indexColumn" v-show="indexColumn !=0 && indexColumn !=2 " v-bind:style="{backgroundColor:invoice_product[2]}">
<div class="form-group">
<div style="display:none" :class="'keyy'+ k +indexColumn">
<input class="jsgrid-button jsgrid-cancel-edit-button" type="button" title="Close Editor" v-on:click="bluretextrow('keyy'+ k +indexColumn)" v-if="indexColumn == 1" />
<div class="row" v-if="indexColumn == 1">
<input type="color" :id="'Color'+ k +indexColumn" />
<input class="btn btn-secondary btn-ft" type="button" value="change Row Color" v-on:click="changeRowColor('Color'+ k +indexColumn , k )" />
</div>
<textarea type="text" v-model="invoice_product[indexColumn]"
placeholder="Default" :name="'key'+ k +indexColumn" v-if="indexColumn == 1"></textarea>
</div>
<p v-html="invoice_product[indexColumn]" v-if="indexColumn == 1 && invoice_product[indexColumn] != ''" value="Default" :id="'keyy'+ k +indexColumn" v-on:click="SwapTextRow('keyy'+ k +indexColumn , k ,indexColumn)"></p>
<p v-if="indexColumn == 1 && invoice_product[indexColumn] == ''" :id="'keyy'+ k +indexColumn" v-on:click="SwapTextRow('keyy'+ k +indexColumn , k ,indexColumn )">Default Description</p>
</div>
<div class="form-group" v-if="indexColumn != 1">
<div style="display:none" :class="'keyy'+ k +indexColumn">
<input class="jsgrid-button jsgrid-cancel-edit-button" type="button" title="Close Editor" v-on:click="bluretextrow('keyy'+ k +indexColumn)" />
<input type="file" name="fileinput + k +indexColumn" style="width:100%" v-on:change="uploadFile($event , k , indexColumn , 'key'+ k +indexColumn)" ref="file" :maxFileSize="1000000" />
<button style="margin-bottom:10px;" v-on:click="AddNote('key'+ k +indexColumn)" type="button" id="Undobtn" class="btn btn-secondary btn-ft">Add Note</button>
<textarea type="text" v-model="invoice_product[indexColumn]"
placeholder="Default" :name="'key'+ k +indexColumn"></textarea>
</div>
<p v-html="invoice_product[indexColumn]" v-if="indexColumn != 1 && invoice_product[indexColumn] != ''" value="Default" :id="'keyy'+ k +indexColumn" v-on:click="SwapTextRow('keyy'+ k +indexColumn , k ,indexColumn)"></p>
<p v-if="indexColumn != 1 && invoice_product[indexColumn] == ''" :id="'keyy'+ k +indexColumn" v-on:click="SwapTextRow('keyy'+ k +indexColumn , k ,indexColumn )">Default Description</p>
</div>
</td>
<td class="jsgrid-cell jsgrid-control-field jsgrid-align-center" style="width: 50px;">
<input :disabled="EnableUndoRedo === false" class="jsgrid-button jsgrid-cancel-edit-button" type="button" title="Delete Row" v-on:click="deleteRow(k, invoice_product)">
</td>
</tr>
</tbody>
<tr class="jsgrid-alt-row" v-show="SemanticFlage === true">
<td class="jsgrid-cell" style="width:300px;" v-for="(column, indexColumn) in Semantics" :key="indexColumn" v-show="indexColumn !=0 && indexColumn !=2 && indexColumn == 1">
<div class="form-group">
<div style="display:none" :class="'Sema' +indexColumn">
<textarea type="text" v-model="Semantics[indexColumn].Name"
placeholder="Default" :name="'Semantic' + indexColumn" :id="'Semantic' + indexColumn" v-if="indexColumn == 1"></textarea>
</div>
<p v-html="Semantics[indexColumn].Name" style="font-size:50px" v-if="indexColumn == 1 && Semantics[indexColumn].Name != ''" value="Default" :id="'Sema' +indexColumn" v-on:click="SwapTextSemantic('Sema' +indexColumn ,indexColumn)"></p>
<p v-if="indexColumn == 1 && Semantics[indexColumn].Name == ''" :id="'Sema' +indexColumn" v-on:click="SwapTextSemantic('Sema' +indexColumn ,indexColumn)">Default Description</p>
</div>
</td>
<td class="jsgrid-cell" style="width: 300px;" v-for="(column, indexColumn) in Semantics" v-show="indexColumn !=0 && indexColumn !=2 && indexColumn != 1" >
<div class="form-group" v-if="indexColumn > 1">
<div style="display:none" :class="'Sema' +indexColumn">
<textarea type="text" v-model="Semantics[indexColumn].Name"
placeholder="Default" :name="'Semantic' + indexColumn" :id="'Semantic' + indexColumn"></textarea>
</div>
<p v-html="Semantics[indexColumn].Name" style="font-size:50px" v-if="indexColumn > 1 && Semantics[indexColumn].Name != ''" value="Default" :id="'Sema' +indexColumn" v-on:click="SwapTextSemantic('Sema' +indexColumn ,indexColumn)"></p>
<p v-if="indexColumn > 1 && Semantics[indexColumn].Name == ''" :id="'Sema' +indexColumn" v-on:click="SwapTextSemantic('Sema' +indexColumn ,indexColumn)">Default Description</p>
</div>
</td>
<td class="jsgrid-cell jsgrid-control-field jsgrid-align-center"></td>
</tr>
</table>
</div>
body {
margin: 0;
padding: 2rem;
}
table {
text-align: left;
position: relative;
border-collapse: collapse;
}
th, td {
padding: 0.25rem;
}
th {
position: sticky;
top: 0; /* Don't forget this, required for the stickiness */
}
I know that code is very complicated but it work dynamicity by backend developers. When I try to make simple table from zero using only CSS and html position sticky worked I don't know where is the problem