CSS位置：在引导表格中处于粘滞状态

时间：2019-01-28 10:43:08

标签： html css-tables sticky

在开始测试之前，我虽然应该问社区：我想使用标准<table>元素在引导程序中创建表，并使某些行像代码笔库中的示例一样具有粘性（在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.
 */
    </code>
  </pre>
</footer>

0 个答案:

没有答案
相关问题
最新问题