Таблица только CSS с DIV.Как НЕ прокручивать верхний ряд - PullRequest
Новая
       0

Таблица только CSS с DIV.Как НЕ прокручивать верхний ряд

0 голосов
/ 26 ноября 2018

У меня есть чистая таблица DIV, использующая отображение: таблица, таблица-строка, стиль ячейки таблицы.У меня есть прокрутка всей таблицы, но строка заголовка, прокрутка, а также строки сведений.

Есть ли методы, позволяющие указать, что строка заголовка (1-я строка) не должна прокручиваться?

Пример: 

    <style>
      .content {overflow: auto;}
      .table { display: table;}
      .row {display: table-row;}
      .cell {display: table-cell;}
    </style>

    ...
<div class="content">
    <div class="table">
      <div class="row">
        <div class="cell">header</div>
        <div class="cell">data</div>
        <div class="cell">row</div>
        <div class="cell">here</div>
      </div>
      <div class="row">
        <div class="cell">...</div>
        <div class="cell">data</div>
        <div class="cell">row</div>
        <div class="cell">here</div>
      </div>
      <div class="row">
        <div class="cell">...</div>
        <div class="cell">data</div>
        <div class="cell">row</div>
        <div class="cell">here</div>
      </div>
    </div>
</div>

В идеале я бы позволил прокручивать строки данных (строки 2 и 3 и т. Д.), В то время как строка заголовка (строка 1) остается вверху.

Да - я мог бы сделать это через HTML и т. Д. ... но по разным причинам хочу попытаться решить эту проблему.

Спасибо.

Ответы [ 2 ]

0 голосов
/ 26 ноября 2018 

section {
 position: relative;
    border: 1px solid #000;
    padding-top: 37px;
    background: #ff0000;
}

.container {
  overflow-y: auto;
  height: 400px;
  
}
.table{display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: grey; border-spacing: 0;
    width: 100%;}
.cell , .cell-header{ display:table-cell; border-bottom: 1px solid #eee;
    background: #ddd;
    color: #000;
    padding: 10px 25px;}
.row{ display:table-row;}
.row:first-child{height: 0;
    line-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    color: transparent;
    border: none;
    white-space: nowrap;}
	.row:first-child div {
    border: none;
}

.cell + .cell {
    border-left: 1px solid #eee;
}
.row:first-child .cell-header div{
 position: absolute;
    background: transparent;
    color: #fff;
    padding: 9px 25px;
    top: 0;
    margin-left: -25px;
    line-height: normal;
    border-left: 1px solid #eee;
}

.row:first-child .cell-header {
  height: 0;
    line-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    color: transparent;
    border: none;
    white-space: nowrap;
}
<section class="">
  <div class="container">
    <div class="table">
      
        <div class="row">
         <div class="cell-header">
            Table attribute name
            <div>Table attribute name</div>
         </div>
         <div class="cell-header">
            Value
            <div>Value</div>
         </div>
         <div class="cell-header">
            Description
            <div>Description</div>
         </div>
        </div>
      
        <div class="row">
          <div class="cell">align</div>
          <div class="cell">left, center, right</div>
          <div class="cell">Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</div>
        </div>
        <div class="row">
          <div class="cell">bgcolor</div>
          <div class="cell">rgb(x,x,x), #xxxxxx, colorname</div>
          <div class="cell">Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</div>
        </div>
        <div class="row">
          <div class="cell">border</div>
          <div class="cell">1,""</div>
          <div class="cell">Specifies whether the table cells should have borders or not</div>
        </div>
        <div class="row">
          <div class="cell">cellpadding</div>
          <div class="cell">pixels</div>
          <div class="cell">Not supported in HTML5. Specifies the space between the cell wall and the cell content</div>
        </div>
        <div class="row">
          <div class="cell">cellspacing</div>
          <div class="cell">pixels</div>
          <div class="cell">Not supported in HTML5. Specifies the space between cells</div>
        </div>
        <div class="row">
          <div class="cell">frame</div>
          <div class="cell">void, above, below, hsides, lhs, rhs, vsides, box, border</div>
          <div class="cell">Not supported in HTML5. Specifies which parts of the outside borders that should be visible</div>
        </div>
        <div class="row">
          <div class="cell">rules</div>
          <div class="cell">none, groups, rows, cols, all</div>
          <div class="cell">Not supported in HTML5. Specifies which parts of the inside borders that should be visible</div>
        </div>
        <div class="row">
          <div class="cell">summary</div>
          <div class="cell">text</div>
          <div class="cell">Not supported in HTML5. Specifies a summary of the content of a table</div>
        </div>
        <div class="row">
          <div class="cell">width</div>
          <div class="cell">pixels, %</div>
          <div class="cell">Not supported in HTML5. Specifies the width of a table</div>
        </div>
		
		
		
		 <div class="row">
          <div class="cell">cellpadding</div>
          <div class="cell">pixels</div>
          <div class="cell">Not supported in HTML5. Specifies the space between the cell wall and the cell content</div>
        </div>
        <div class="row">
          <div class="cell">cellspacing</div>
          <div class="cell">pixels</div>
          <div class="cell">Not supported in HTML5. Specifies the space between cells</div>
        </div>
        <div class="row">
          <div class="cell">frame</div>
          <div class="cell">void, above, below, hsides, lhs, rhs, vsides, box, border</div>
          <div class="cell">Not supported in HTML5. Specifies which parts of the outside borders that should be visible</div>
        </div>
        <div class="row">
          <div class="cell">rules</div>
          <div class="cell">none, groups, rows, cols, all</div>
          <div class="cell">Not supported in HTML5. Specifies which parts of the inside borders that should be visible</div>
        </div>
        <div class="row">
          <div class="cell">summary</div>
          <div class="cell">text</div>
          <div class="cell">Not supported in HTML5. Specifies a summary of the content of a table</div>
        </div>
        <div class="row">
          <div class="cell">width</div>
          <div class="cell">pixels, %</div>
          <div class="cell">Not supported in HTML5. Specifies the width of a table</div>
        </div> <div class="row">
          <div class="cell">cellpadding</div>
          <div class="cell">pixels</div>
          <div class="cell">Not supported in HTML5. Specifies the space between the cell wall and the cell content</div>
        </div>
        <div class="row">
          <div class="cell">cellspacing</div>
          <div class="cell">pixels</div>
          <div class="cell">Not supported in HTML5. Specifies the space between cells</div>
        </div>
        <div class="row">
          <div class="cell">frame</div>
          <div class="cell">void, above, below, hsides, lhs, rhs, vsides, box, border</div>
          <div class="cell">Not supported in HTML5. Specifies which parts of the outside borders that should be visible</div>
        </div>
        <div class="row">
          <div class="cell">rules</div>
          <div class="cell">none, groups, rows, cols, all</div>
          <div class="cell">Not supported in HTML5. Specifies which parts of the inside borders that should be visible</div>
        </div>
        <div class="row">
          <div class="cell">summary</div>
          <div class="cell">text</div>
          <div class="cell">Not supported in HTML5. Specifies a summary of the content of a table</div>
        </div>
        <div class="row">
          <div class="cell">width</div>
          <div class="cell">pixels, %</div>
          <div class="cell">Not supported in HTML5. Specifies the width of a table</div>
        </div> <div class="row">
          <div class="cell">cellpadding</div>
          <div class="cell">pixels</div>
          <div class="cell">Not supported in HTML5. Specifies the space between the cell wall and the cell content</div>
        </div>
        <div class="row">
          <div class="cell">cellspacing</div>
          <div class="cell">pixels</div>
          <div class="cell">Not supported in HTML5. Specifies the space between cells</div>
        </div>
        <div class="row">
          <div class="cell">frame</div>
          <div class="cell">void, above, below, hsides, lhs, rhs, vsides, box, border</div>
          <div class="cell">Not supported in HTML5. Specifies which parts of the outside borders that should be visible</div>
        </div>
        <div class="row">
          <div class="cell">rules</div>
          <div class="cell">none, groups, rows, cols, all</div>
          <div class="cell">Not supported in HTML5. Specifies which parts of the inside borders that should be visible</div>
        </div>
        <div class="row">
          <div class="cell">summary</div>
          <div class="cell">text</div>
          <div class="cell">Not supported in HTML5. Specifies a summary of the content of a table</div>
        </div>
        <div class="row">
          <div class="cell">width</div>
          <div class="cell">pixels, %</div>
          <div class="cell">Not supported in HTML5. Specifies the width of a table</div>
        </div> <div class="row">
          <div class="cell">cellpadding</div>
          <div class="cell">pixels</div>
          <div class="cell">Not supported in HTML5. Specifies the space between the cell wall and the cell content</div>
        </div>
        <div class="row">
          <div class="cell">cellspacing</div>
          <div class="cell">pixels</div>
          <div class="cell">Not supported in HTML5. Specifies the space between cells</div>
        </div>
        <div class="row">
          <div class="cell">frame</div>
          <div class="cell">void, above, below, hsides, lhs, rhs, vsides, box, border</div>
          <div class="cell">Not supported in HTML5. Specifies which parts of the outside borders that should be visible</div>
        </div>
        <div class="row">
          <div class="cell">rules</div>
          <div class="cell">none, groups, rows, cols, all</div>
          <div class="cell">Not supported in HTML5. Specifies which parts of the inside borders that should be visible</div>
        </div>
        <div class="row">
          <div class="cell">summary</div>
          <div class="cell">text</div>
          <div class="cell">Not supported in HTML5. Specifies a summary of the content of a table</div>
        </div>
        <div class="row">
          <div class="cell">width</div>
          <div class="cell">pixels, %</div>
          <div class="cell">Not supported in HTML5. Specifies the width of a table</div>
        </div> <div class="row">
          <div class="cell">cellpadding</div>
          <div class="cell">pixels</div>
          <div class="cell">Not supported in HTML5. Specifies the space between the cell wall and the cell content</div>
        </div>
        <div class="row">
          <div class="cell">cellspacing</div>
          <div class="cell">pixels</div>
          <div class="cell">Not supported in HTML5. Specifies the space between cells</div>
        </div>
        <div class="row">
          <div class="cell">frame</div>
          <div class="cell">void, above, below, hsides, lhs, rhs, vsides, box, border</div>
          <div class="cell">Not supported in HTML5. Specifies which parts of the outside borders that should be visible</div>
        </div>
        <div class="row">
          <div class="cell">rules</div>
          <div class="cell">none, groups, rows, cols, all</div>
          <div class="cell">Not supported in HTML5. Specifies which parts of the inside borders that should be visible</div>
        </div>
        <div class="row">
          <div class="cell">summary</div>
          <div class="cell">text</div>
          <div class="cell">Not supported in HTML5. Specifies a summary of the content of a table</div>
        </div>
        <div class="row">
          <div class="cell">width</div>
          <div class="cell">pixels, %</div>
          <div class="cell">Not supported in HTML5. Specifies the width of a table</div>
        </div>
     
    </div>
  </div>
</section>
0 голосов
/ 26 ноября 2018 
.row {
    display: table-row;
    position: fixed;
    top: 10px;
    left: 10px;
    bottom: 10px;
    width: 100%;
    overflow-y: scroll
 }

top, left, bottom и width сохраняются в соответствии с вами.

и overflow-y: scroll; вы не поставили overflow-y: hidden;

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...