Блог

Можно ли сделать некоторые столбцы фиксированными в таблице CSS, при условии, что это HTML и CSS таблицы. здесь содержимое таблицы прокручивается как по оси x, так и по оси y, но я пытаюсь сделать фиксированные ячейки фиксированными, а остальные столбцы в строке должны быть прокручиваемыми.

можно ли это сделать с помощью приведенной ниже структуры HTML?

 <div class="table-content">
    <div class="content-wrapper">
         <div class="row1">
             <div class="fixedCells">
                 <div class="cell cell11">
                     text 1:1
                 </div>
                 <div class="cell cell12">
                     text 1:2
                 </div>
             </div>
              <div class="cell cell13">
                 text 1:3
              </div>
              <div class="cell cell14">
                 text 1:4
              </div>
         </div>
         <div class="row2">
             <div class="fixedCells">
                 <div class="cell cell21">
                     text 2:1
                 </div>
                 <div class="cell cell22">
                     text 2:2
                 </div>
             </div>
              <div class="cell cell23">
                 text 2:3
              </div>
              <div class="cell cell24">
                 text 2:4
              </div>
         </div>
    </div>
</div>

.tableContent {
   position: absolute;
   top: 30px;
   border: 1px solid #DDD;
   height: 100px;
   width : 300px;
   overflow: scroll;
}

.content-wrapper {
    overflow: hidden; 
    width: 400px;
    position: absolute;
}

.row1 {
   position: absolute;
   height: 25px;
   width: 400px;
   top: 0px;
}

.row2 {
  position: absolute;
  height: 25px;
  width: 400px;
  top: 25px;
}

.fixedCells {
   position: sticky;
   z-index: 10;
   left: 0px;
   top: 0px;
   width: 400px;
   height: 25px;
}

.cell {
    width: 100px;
    position: absolute;
    top: 0px;
    height: 25px;
}

.cell11, cell21{
   left: 0px;
}
.cell12, cell22{
   left: 100px;
}
.cell13, cell23{
   left: 200px;
}
.cell14, cell24{
   left: 300px
}
 

Ваша структура HTML была неправильной. Кроме того, имена элементов HTML и те, что в CSS, не совпадали. Попробуй это:

 .container {
    width: 300px;
    overflow-x:scroll;  
}
.table-content {
   border: 1px solid #DDD;
   height: 100px;
   width : 800px;
   display:table;
   
}

.table-content .row {
    display: table-row;
}
.table-content .row div {
    display: table-cell;
    border: 1px solid #ddd;
    background: white;
    padding: 5px;   
}

.table-content .row .cell11,
.table-content .row .cell21 {
    position: sticky;
    left:0; 
    z-index:2;
    border-right: 3px solid #ddd;
    background-color: #efefef;
} 

 <div class="container">
<div class="table-content">

         <div class="row row1">
               <div class="cell cell11">
                     text 1:1
               </div>
               <div class="cell cell12">
                     text 1:2
               </div>
              <div class="cell cell13">
                 text 1:3
              </div>
              <div class="cell cell14">
                 text 1:4
              </div>
         </div>
         <div class="row row2">

               <div class="cell cell21">
                     text 2:1
               </div>
               <div class="cell cell22">
                     text 2:2
               </div>

              <div class="cell cell23">
                 text 2:3
              </div>
              <div class="cell cell24">
                 text 2:4
              </div>
         </div>

</div>
</div>