CSS позиция: липкая в загрузочных таблицах - PullRequest
Новая
       45

CSS позиция: липкая в загрузочных таблицах

0 голосов
/ 28 января 2019

Прежде чем приступить к тестированию, я должен спросить сообщество: я хочу создать таблицы в начальной загрузке с использованием стандартных элементов <table> и сделать некоторые строки липкими, как в этом примере из codepen (не работает в Edge или chromeиз-за известной ошибки, но ее можно использовать, установив для каждого <th> значение position: sticky, я думаю.) Пример использует div: s вместо элементов таблицы и предназначен только для демонстрации желаемого поведения.Итак, кто-нибудь проверял, или это по какой-то очевидной причине - мне неизвестна причина, по которой невозможно использовать position:sticky таким образом в начальной загрузке?: 

*{
  margin: 0;
  pading: 0;
  box-sizing: border-box;
}
body{
  background-color: rgb(63,72,83);
  font-family: sans-serif;
  color: rgb(220,220,220);
  padding: 50px;
  width: 100vw;
  overflow-x: hidden;
}
h1{
  font-weight: 400;
}
a{
  color: inherit;
}
p{
  margin-top: .7em;
}
.warning{
  color: rgb(62,148,236);
}
.st_viewport{
  max-height: 500px;
  overflow: auto;
}

[data-table_id="1"]{
  background-color: rgb(255,115,0);
}
[data-table_id="2"]{
  background-color: rgb(61,53,39);
  color: rgb(220,220,220);
}
[data-table_id="3"]{
  background-color: rgba(168,189,4, .8);
}

._rank{
  min-width: 80px;
}
._id{
  min-width: 60px;
}
._name{
  min-width: 130px;
}
._surname{
  min-width: 130px;
}
._year{
  min-width: 80px;
}
._section{
  min-width: 130px;
}

pre{
  overflow: auto;
}

/** Sticky table styles **/
.st_viewport{
  background-color: rgb(62,148,236);
  color: rgb(27,30,36);
  margin: 20px 0;
}
/* ###  Table wrap */
.st_wrap_table{
  
}
/* ##   header */
.st_table_header{
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  z-index: 1;
  background-color: rgb(27,30,36);
  color: rgb(220,220,220);
}
.st_table_header h2{
  font-weight: 400;
  margin: 0 20px;
  padding: 20px 0 0;
}
.st_table_header .st_row{
  color: rgba(220,220,220, .7);
}
.st_table_header .st_column{
  
}
/* ##  table */
.st_table{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}
/* #   row */
.st_row{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin: 0;
}
.st_table .st_row:nth-child(even){
  background-color: rgba(0,0,0, .1)
}
/* #   column */
.st_column{
  padding: 10px 20px;
}
<h1>Sticky Table Headers by <code>position: sticky;</code></h1>
<p>Trying out to make a sweet table with sticky table headers if their table is in the viewport. (Like the iOS names list names beginning capital letter)</p>
<p class="warning">Supported by Firefox and Safari [<a href="http://caniuse.com/#feat=css-sticky" target="_blank">caniuse.com#sticky</a>]</p>
<main class="st_viewport">
  <div class="st_wrap_table" data-table_id="0">
    <header class="st_table_header">
      <h2>Table header one</h2>
      <div class="st_row">
        <div class="st_column _rank">Rank</div>
        <div class="st_column _name">Name</div>
        <div class="st_column _surname">Surname</div>
        <div class="st_column _year">Year</div>
        <div class="st_column _section">Section</div>
      </div>
    </header>
    <div class="st_table">
      <div class="st_row">
        <div class="st_column _rank">0</div>
        <div class="st_column _name">John</div>
        <div class="st_column _surname">Doe</div>
        <div class="st_column _year">1973</div>
        <div class="st_column _section">Germany</div>
      </div>
      <div class="st_row">
        <div class="st_column _rank">0</div>
        <div class="st_column _name">Max</div>
        <div class="st_column _surname">Luke</div>
        <div class="st_column _year">1971</div>
        <div class="st_column _section">USA</div>
      </div>
      <div class="st_row">
        <div class="st_column _rank">0</div>
        <div class="st_column _name">Jonas</div>
        <div class="st_column _surname">Kunze</div>
        <div class="st_column _year">2015</div>
        <div class="st_column _section">Germany</div>
      </div>
      <div class="st_row">
        <div class="st_column _rank">0</div>
        <div class="st_column _name">Janina</div>
        <div class="st_column _surname">Endres</div>
        <div class="st_column _year">1955</div>
        <div class="st_column _section">Belgium</div>
      </div>
      <div class="st_row">
        <div class="st_column _rank">0</div>
        <div class="st_column _name">Lena</div>
        <div class="st_column _surname">Eifel</div>
        <div class="st_column _year">1996</div>
        <div class="st_column _section">Germany</div>
      </div>
      <div class="st_row">
        <div class="st_column _rank">0</div>
        <div class="st_column _name">Jonas</div>
        <div class="st_column _surname">Nacht</div>
        <div class="st_column _year">1968</div>
        <div class="st_column _section">Swiss</div>
      </div>
      <div class="st_row">
        <div class="st_column _rank">0</div>
        <div class="st_column _name">Vanessa</div>
        <div class="st_column _surname">Schneider</div>
        <div class="st_column _year">2004</div>
        <div class="st_column _section">Russia</div>
      </div>
      <div class="st_row">
        <div class="st_column _rank">0</div>
        <div class="st_column _name">laura</div>
        <div class="st_column _surname">Beike</div>
        <div class="st_column _year">1952</div>
        <div class="st_column _section">Sweden</div>
      </div>
    </div>
  </div>
  <div class="st_wrap_table" data-table_id="1">
    <header class="st_table_header">
      <h2>Holy shit :@</h2>
      <div class="st_row">
        <div class="st_column _rank">Rank</div>
        <div class="st_column _name">Name</div>
        <div class="st_column _surname">Surname</div>
        <div class="st_column _year">Year</div>
        <div class="st_column _section">Section</div>
      </div>
    </header>
    <div class="st_table">
      <div class="st_row">
        <div class="st_column _rank">0</div>
        <div class="st_column _name">Jonas</div>
        <div class="st_column _surname">Kunze</div>
        <div class="st_column _year">2015</div>
        <div class="st_column _section">Germany</div>
      </div>
      <div class="st_row">
        <div class="st_column _rank">0</div>
        <div class="st_column _name">Janina</div>
        <div class="st_column _surname">Endres</div>
        <div class="st_column _year">1955</div>
        <div class="st_column _section">Belgium</div>
      </div>
      <div class="st_row">
        <div class="st_column _rank">0</div>
        <div class="st_column _name">Lena</div>
        <div class="st_column _surname">Eifel</div>
        <div class="st_column _year">1996</div>
        <div class="st_column _section">Germany</div>
      </div>
      <div class="st_row">
        <div class="st_column _rank">0</div>
        <div class="st_column _name">John</div>
        <div class="st_column _surname">Doe</div>
        <div class="st_column _year">1973</div>
        <div class="st_column _section">Germany</div>
      </div>
      <div class="st_row">
        <div class="st_column _rank">0</div>
        <div class="st_column _name">Max</div>
        <div class="st_column _surname">Luke</div>
        <div class="st_column _year">1971</div>
        <div class="st_column _section">USA</div>
      </div>
      <div class="st_row">
        <div class="st_column _rank">0</div>
        <div class="st_column _name">Jonas</div>
        <div class="st_column _surname">Nacht</div>
        <div class="st_column _year">1968</div>
        <div class="st_column _section">Swiss</div>
      </div>
      <div class="st_row">
        <div class="st_column _rank">0</div>
        <div class="st_column _name">Vanessa</div>
        <div class="st_column _surname">Schneider</div>
        <div class="st_column _year">2004</div>
        <div class="st_column _section">Russia</div>
      </div>
      <div class="st_row">
        <div class="st_column _rank">0</div>
        <div class="st_column _name">laura</div>
        <div class="st_column _surname">Beike</div>
        <div class="st_column _year">1952</div>
        <div class="st_column _section">Sweden</div>
      </div>
    </div>
  </div>
  <div class="st_wrap_table" data-table_id="2">
    <header class="st_table_header">
      <h2>Isn't that nice</h2>
      <div class="st_row">
        <div class="st_column _rank">Rank</div>
        <div class="st_column _name">Name</div>
        <div class="st_column _surname">Surname</div>
        <div class="st_column _year">Year</div>
        <div class="st_column _section">Section</div>
      </div>
    </header>
    <div class="st_table">
      <div class="st_row">
        <div class="st_column _rank">0</div>
        <div class="st_column _name">Vanessa</div>
        <div class="st_column _surname">Schneider</div>
        <div class="st_column _year">2004</div>
        <div class="st_column _section">Russia</div>
      </div>
      <div class="st_row">
        <div class="st_column _rank">0</div>
        <div class="st_column _name">laura</div>
        <div class="st_column _surname">Beike</div>
        <div class="st_column _year">1952</div>
        <div class="st_column _section">Sweden</div>
      </div>
      <div class="st_row">
        <div class="st_column _rank">0</div>
        <div class="st_column _name">John</div>
        <div class="st_column _surname">Doe</div>
        <div class="st_column _year">1973</div>
        <div class="st_column _section">Germany</div>
      </div>
      <div class="st_row">
        <div class="st_column _rank">0</div>
        <div class="st_column _name">Max</div>
        <div class="st_column _surname">Luke</div>
        <div class="st_column _year">1971</div>
        <div class="st_column _section">USA</div>
      </div>
      <div class="st_row">
        <div class="st_column _rank">0</div>
        <div class="st_column _name">Jonas</div>
        <div class="st_column _surname">Kunze</div>
        <div class="st_column _year">2015</div>
        <div class="st_column _section">Germany</div>
      </div>
      <div class="st_row">
        <div class="st_column _rank">0</div>
        <div class="st_column _name">Janina</div>
        <div class="st_column _surname">Endres</div>
        <div class="st_column _year">1955</div>
        <div class="st_column _section">Belgium</div>
      </div>
      <div class="st_row">
        <div class="st_column _rank">0</div>
        <div class="st_column _name">Lena</div>
        <div class="st_column _surname">Eifel</div>
        <div class="st_column _year">1996</div>
        <div class="st_column _section">Germany</div>
      </div>
      <div class="st_row">
        <div class="st_column _rank">0</div>
        <div class="st_column _name">Jonas</div>
        <div class="st_column _surname">Nacht</div>
        <div class="st_column _year">1968</div>
        <div class="st_column _section">Swiss</div>
      </div>
    </div>
  </div>
  <div class="st_wrap_table" data-table_id="3">
    <header class="st_table_header">
      <h2>Native STICKY</h2>
      <div class="st_row">
        <div class="st_column _rank">Rank</div>
        <div class="st_column _name">Name</div>
        <div class="st_column _surname">Surname</div>
        <div class="st_column _year">Year</div>
        <div class="st_column _section">Section</div>
      </div>
    </header>
    <div class="st_table">
      <div class="st_row">
        <div class="st_column _rank">0</div>
        <div class="st_column _name">John</div>
        <div class="st_column _surname">Doe</div>
        <div class="st_column _year">1973</div>
        <div class="st_column _section">Germany</div>
      </div>
      <div class="st_row">
        <div class="st_column _rank">0</div>
        <div class="st_column _name">Lena</div>
        <div class="st_column _surname">Eifel</div>
        <div class="st_column _year">1996</div>
        <div class="st_column _section">Germany</div>
      </div>
      <div class="st_row">
        <div class="st_column _rank">0</div>
        <div class="st_column _name">Jonas</div>
        <div class="st_column _surname">Nacht</div>
        <div class="st_column _year">1968</div>
        <div class="st_column _section">Swiss</div>
      </div>
      <div class="st_row">
        <div class="st_column _rank">0</div>
        <div class="st_column _name">Vanessa</div>
        <div class="st_column _surname">Schneider</div>
        <div class="st_column _year">2004</div>
        <div class="st_column _section">Russia</div>
      </div>
      <div class="st_row">
        <div class="st_column _rank">0</div>
        <div class="st_column _name">laura</div>
        <div class="st_column _surname">Beike</div>
        <div class="st_column _year">1952</div>
        <div class="st_column _section">Sweden</div>
      </div>
      <div class="st_row">
        <div class="st_column _rank">0</div>
        <div class="st_column _name">Max</div>
        <div class="st_column _surname">Luke</div>
        <div class="st_column _year">1971</div>
        <div class="st_column _section">USA</div>
      </div>
      <div class="st_row">
        <div class="st_column _rank">0</div>
        <div class="st_column _name">Jonas</div>
        <div class="st_column _surname">Kunze</div>
        <div class="st_column _year">2015</div>
        <div class="st_column _section">Germany</div>
      </div>
      <div class="st_row">
        <div class="st_column _rank">0</div>
        <div class="st_column _name">Janina</div>
        <div class="st_column _surname">Endres</div>
        <div class="st_column _year">1955</div>
        <div class="st_column _section">Belgium</div>
      </div>
    </div>
  </div>
  <div class="st_wrap_table" data-table_id="4">
    <header class="st_table_header">
      <h2>CSS3 *~'</h2>
      <div class="st_row">
        <div class="st_column _rank">Rank</div>
        <div class="st_column _name">Name</div>
        <div class="st_column _surname">Surname</div>
        <div class="st_column _year">Year</div>
        <div class="st_column _section">Section</div>
      </div>
    </header>
    <div class="st_table">
      <div class="st_row">
        <div class="st_column _rank">0</div>
        <div class="st_column _name">John</div>
        <div class="st_column _surname">Doe</div>
        <div class="st_column _year">1973</div>
        <div class="st_column _section">Germany</div>
      </div>
      <div class="st_row">
        <div class="st_column _rank">0</div>
        <div class="st_column _name">Max</div>
        <div class="st_column _surname">Luke</div>
        <div class="st_column _year">1971</div>
        <div class="st_column _section">USA</div>
      </div>
      <div class="st_row">
        <div class="st_column _rank">0</div>
        <div class="st_column _name">Jonas</div>
        <div class="st_column _surname">Kunze</div>
        <div class="st_column _year">2015</div>
        <div class="st_column _section">Germany</div>
      </div>
      <div class="st_row">
        <div class="st_column _rank">0</div>
        <div class="st_column _name">Jonas</div>
        <div class="st_column _surname">Nacht</div>
        <div class="st_column _year">1968</div>
        <div class="st_column _section">Swiss</div>
      </div>
      <div class="st_row">
        <div class="st_column _rank">0</div>
        <div class="st_column _name">Vanessa</div>
        <div class="st_column _surname">Schneider</div>
        <div class="st_column _year">2004</div>
        <div class="st_column _section">Russia</div>
      </div>
      <div class="st_row">
        <div class="st_column _rank">0</div>
        <div class="st_column _name">Janina</div>
        <div class="st_column _surname">Endres</div>
        <div class="st_column _year">1955</div>
        <div class="st_column _section">Belgium</div>
      </div>
      <div class="st_row">
        <div class="st_column _rank">0</div>
        <div class="st_column _name">Lena</div>
        <div class="st_column _surname">Eifel</div>
        <div class="st_column _year">1996</div>
        <div class="st_column _section">Germany</div>
      </div>
      <div class="st_row">
        <div class="st_column _rank">0</div>
        <div class="st_column _name">laura</div>
        <div class="st_column _surname">Beike</div>
        <div class="st_column _year">1952</div>
        <div class="st_column _section">Sweden</div>
      </div>
    </div>
  </div>
</main>
<footer>
  <pre>
    <code>
/**
 * Sticky Table Headers
 *
 * @author <a href="http://elementcode.de" tatget="_blank">Wolf Wortmann</a> &lt;http://elementcode.de&gt; / &lt;ww@elementcode.de&gt;
 * @copyright (c) Copyright <a href="http://elementcode.de" tatget="_blank">Wolf Wortmann</a> &lt;http://elementcode.de&gt; / &lt;ww@elementcode.de&gt;
 * @license Feel free to use, modify and redistribute this code. But keep this license AND copyright notice.
 */
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...