Question

我有一个网站显示一个包含天气数据的简单表格。我们需要显示很多行，所以我想让主体可滚动，同时保持标题固定。

我尝试了很多解决方案，但它们似乎都没有与我的表头兼容（一些标题单元格有子类别）。

我想找到一个基于css和/或javascript的解决方案。引入jQuery或类似的东西会使网站更慢（许多用户都有无线电链接或卫星互联网访问）。

我已将部分代码复制到JSFiddle

<table>

<thead>
  <tr>
    <th rowspan="2">Location</th>
    <th rowspan="2">Updated</th>
    <th colspan="2">Temperature [°C]</th>
    <th colspan="2">Wind [m/s]</th>
    <th rowspan="2">Air pressure [hPa]</th>
    <th rowspan="2">Relative humidity [%]</th>
    <th rowspan="2">Precipitation [mm]</th>
  </tr>
  <tr><th>present</th><th>wind chill</th><th>speed</th><th>max</th> </tr>
</thead>
<tbody>
  <tr>
    <td>Aasiaat</td>
    <td>20.07 15:00</td>
    <td>9,3</td>
    <td></td>
    <td>2,5 &#8665;</td>
    <td>3,1</td>
    <td>1010</td>
    <td>87,1</td>
    <td>0,0</td>
  </tr>
  <tr>
    <td>Angisoq</td>
    <td>20.07 15:00</td>
    <td>5,9</td>
    <td></td>
    <td>3,6 &#8656;</td>
    <td>4,6</td>
    <td>1013</td>
    <td>85,0</td>
    <td>n/a</td>
  </tr>
    <tr>
    <td>Aasiaat</td>
    <td>20.07 15:00</td>
    <td>9,3</td>
    <td></td>
    <td>2,5 &#8665;</td>
    <td>3,1</td>
    <td>1010</td>
    <td>87,1</td>
    <td>0,0</td>
  </tr>
   <tr>
    <td>Test3</td>
    <td>20.07 15:00</td>
    <td>9,3</td>
    <td></td>
    <td>2,5 &#8665;</td>
    <td>3,1</td>
    <td>1010</td>
    <td>87,1</td>
    <td>0,0</td>
  </tr>
  <tr>
    <td>Test4</td>
    <td>20.07 15:00</td>
    <td>9,3</td>
    <td></td>
    <td>2,5 &#8665;</td>
    <td>3,1</td>
    <td>1010</td>
    <td>87,1</td>
    <td>0,0</td>
  </tr>
    <tr>
    <td>Test5</td>
    <td>20.07 15:00</td>
    <td>9,3</td>
    <td></td>
    <td>2,5 &#8665;</td>
    <td>3,1</td>
    <td>1010</td>
    <td>87,1</td>
    <td>0,0</td>
  </tr>
 </tbody>
</table>

Answer 1

试试这个css：

＆＃13;

.table-container {
    height: 20em;
    width:100%
}
table {
    display: flex;
    flex-flow: column;
    height: 100%;
    width: 100%;
}
table thead {
    /* head takes the height it requires, 
    and it's not scaled when table is resized */
    flex: 0 0 auto;
    width: calc(100% - 0.9em);
}
table tbody {
    /* body takes all the remaining available space */
    flex: 1 1 auto;
    display: block;
    overflow-y: scroll;
}
table tbody tr {
    width: 100%;
}
table thead,
table tbody tr {
    display: table;
    table-layout: fixed;
}
/* decorations */
.table-container {
    border: 1px solid black;
    padding: 0.3em;
}
table {
    border: 1px solid lightgrey;
}
table td, table th {
    padding: 0.3em;
    border: 1px solid lightgrey;
}
table th {
    border: 1px solid grey;
}

＆＃13;

<div class="table-container">
<table>

<thead>
  <tr>
    <th rowspan="2">Location</th>
	<th rowspan="2">Updated</th>
    <th colspan="2">Temperature [°C]</th>
	<th colspan="2">Wind [m/s]</th>
	<th rowspan="2">Air pressure [hPa]</th>
	<th rowspan="2">Relative humidity [%]</th>
	<th rowspan="2">Precipitation [mm]</th>
  </tr>
  <tr><th>present</th><th>wind chill</th><th>speed</th><th>max</th> </tr>
</thead>
<tbody>
  <tr>
    <td>Aasiaat</td>
    <td>20.07 15:00</td>
    <td>9,3</td>
    <td></td>
    <td>2,5 &#8665;</td>
    <td>3,1</td>
    <td>1010</td>
    <td>87,1</td>
    <td>0,0</td>
  </tr>
  <tr>
    <td>Angisoq</td>
    <td>20.07 15:00</td>
    <td>5,9</td>
    <td></td>
    <td>3,6 &#8656;</td>
    <td>4,6</td>
    <td>1013</td>
    <td>85,0</td>
    <td>n/a</td>
  </tr>
    <tr>
    <td>Aasiaat</td>
    <td>20.07 15:00</td>
    <td>9,3</td>
    <td></td>
    <td>2,5 &#8665;</td>
    <td>3,1</td>
    <td>1010</td>
    <td>87,1</td>
    <td>0,0</td>
  </tr>
   <tr>
    <td>Test3</td>
    <td>20.07 15:00</td>
    <td>9,3</td>
    <td></td>
    <td>2,5 &#8665;</td>
    <td>3,1</td>
    <td>1010</td>
    <td>87,1</td>
    <td>0,0</td>
  </tr>
  <tr>
    <td>Test4</td>
    <td>20.07 15:00</td>
    <td>9,3</td>
    <td></td>
    <td>2,5 &#8665;</td>
    <td>3,1</td>
    <td>1010</td>
    <td>87,1</td>
    <td>0,0</td>
  </tr>
    <tr>
    <td>Test5</td>
    <td>20.07 15:00</td>
    <td>9,3</td>
    <td></td>
    <td>2,5 &#8665;</td>
    <td>3,1</td>
    <td>1010</td>
    <td>87,1</td>
    <td>0,0</td>
  </tr>
 </tbody>
</table>

</div>

＆＃13;

Answer 2

您需要使用javascript来保存/伪造表格布局属性（行/列相互调整）

也许clone() jquery + table-layout:fixed可能是一个均匀展开的列的开头，演示如下。

＆＃13;

$("table thead ").clone().prependTo("table");

＆＃13;

table,
th,
td,
th tr {
  border: 1px solid black;
  border-collapse: collapse;
  border-color: #757575;
}
/* test */

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
table,
table thead:first-of-type {
  width: 100%;
  table-layout: fixed;
  /* sprays column evenly when no width set */
}
table thead:first-of-type {
  position: fixed;
  display: table;
  top: 0;
  background: white;
  left: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>

  <thead>
    <tr>
      <th rowspan="2">Location</th>
      <th rowspan="2">Updated</th>
      <th colspan="2">Temperature [°C]</th>
      <th colspan="2">Wind [m/s]</th>
      <th rowspan="2">Air pressure [hPa]</th>
      <th rowspan="2">Relative humidity [%]</th>
      <th rowspan="2">Precipitation [mm]</th>
    </tr>
    <tr>
      <th>present</th>
      <th>wind chill</th>
      <th>speed</th>
      <th>max</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Aasiaat</td>
      <td>20.07 15:00</td>
      <td>9,3</td>
      <td></td>
      <td>2,5 &#8665;</td>
      <td>3,1</td>
      <td>1010</td>
      <td>87,1</td>
      <td>0,0</td>
    </tr>
    <tr>
      <td>Angisoq</td>
      <td>20.07 15:00</td>
      <td>5,9</td>
      <td></td>
      <td>3,6 &#8656;</td>
      <td>4,6</td>
      <td>1013</td>
      <td>85,0</td>
      <td>n/a</td>
    </tr>
    <tr>
      <td>Aasiaat</td>
      <td>20.07 15:00</td>
      <td>9,3</td>
      <td></td>
      <td>2,5 &#8665;</td>
      <td>3,1</td>
      <td>1010</td>
      <td>87,1</td>
      <td>0,0</td>
    </tr>
    <tr>
      <td>Test3</td>
      <td>20.07 15:00</td>
      <td>9,3</td>
      <td></td>
      <td>2,5 &#8665;</td>
      <td>3,1</td>
      <td>1010</td>
      <td>87,1</td>
      <td>0,0</td>
    </tr>
    <tr>
      <td>Test4</td>
      <td>20.07 15:00</td>
      <td>9,3</td>
      <td></td>
      <td>2,5 &#8665;</td>
      <td>3,1</td>
      <td>1010</td>
      <td>87,1</td>
      <td>0,0</td>
    </tr>
    <tr>
      <td>Test5</td>
      <td>20.07 15:00</td>
      <td>9,3</td>
      <td></td>
      <td>2,5 &#8665;</td>
      <td>3,1</td>
      <td>1010</td>
      <td>87,1</td>
      <td>0,0</td>
    </tr>
    <tr>
      <td>Aasiaat</td>
      <td>20.07 15:00</td>
      <td>9,3</td>
      <td></td>
      <td>2,5 &#8665;</td>
      <td>3,1</td>
      <td>1010</td>
      <td>87,1</td>
      <td>0,0</td>
    </tr>
    <tr>
      <td>Angisoq</td>
      <td>20.07 15:00</td>
      <td>5,9</td>
      <td></td>
      <td>3,6 &#8656;</td>
      <td>4,6</td>
      <td>1013</td>
      <td>85,0</td>
      <td>n/a</td>
    </tr>
    <tr>
      <td>Aasiaat</td>
      <td>20.07 15:00</td>
      <td>9,3</td>
      <td></td>
      <td>2,5 &#8665;</td>
      <td>3,1</td>
      <td>1010</td>
      <td>87,1</td>
      <td>0,0</td>
    </tr>
    <tr>
      <td>Test3</td>
      <td>20.07 15:00</td>
      <td>9,3</td>
      <td></td>
      <td>2,5 &#8665;</td>
      <td>3,1</td>
      <td>1010</td>
      <td>87,1</td>
      <td>0,0</td>
    </tr>
    <tr>
      <td>Test4</td>
      <td>20.07 15:00</td>
      <td>9,3</td>
      <td></td>
      <td>2,5 &#8665;</td>
      <td>3,1</td>
      <td>1010</td>
      <td>87,1</td>
      <td>0,0</td>
    </tr>
    <tr>
      <td>Test5</td>
      <td>20.07 15:00</td>
      <td>9,3</td>
      <td></td>
      <td>2,5 &#8665;</td>
      <td>3,1</td>
      <td>1010</td>
      <td>87,1</td>
      <td>0,0</td>
    </tr>
    <tr>
      <td>Aasiaat</td>
      <td>20.07 15:00</td>
      <td>9,3</td>
      <td></td>
      <td>2,5 &#8665;</td>
      <td>3,1</td>
      <td>1010</td>
      <td>87,1</td>
      <td>0,0</td>
    </tr>
    <tr>
      <td>Angisoq</td>
      <td>20.07 15:00</td>
      <td>5,9</td>
      <td></td>
      <td>3,6 &#8656;</td>
      <td>4,6</td>
      <td>1013</td>
      <td>85,0</td>
      <td>n/a</td>
    </tr>
    <tr>
      <td>Aasiaat</td>
      <td>20.07 15:00</td>
      <td>9,3</td>
      <td></td>
      <td>2,5 &#8665;</td>
      <td>3,1</td>
      <td>1010</td>
      <td>87,1</td>
      <td>0,0</td>
    </tr>
    <tr>
      <td>Test3</td>
      <td>20.07 15:00</td>
      <td>9,3</td>
      <td></td>
      <td>2,5 &#8665;</td>
      <td>3,1</td>
      <td>1010</td>
      <td>87,1</td>
      <td>0,0</td>
    </tr>
    <tr>
      <td>Test4</td>
      <td>20.07 15:00</td>
      <td>9,3</td>
      <td></td>
      <td>2,5 &#8665;</td>
      <td>3,1</td>
      <td>1010</td>
      <td>87,1</td>
      <td>0,0</td>
    </tr>
    <tr>
      <td>Test5</td>
      <td>20.07 15:00</td>
      <td>9,3</td>
      <td></td>
      <td>2,5 &#8665;</td>
      <td>3,1</td>
      <td>1010</td>
      <td>87,1</td>
      <td>0,0</td>
    </tr>
  </tbody>
</table>

＆＃13;

这里的body显示了滚动，但它可以是一个设置高度的div，在这种情况下，请参阅下面的演示，其中的内容更加平均和棘手....

＆＃13;

$("table thead ").clone().prependTo("table");

＆＃13;

table,
th,
td,
th tr {
  border: 1px solid black;
  border-collapse: collapse;
  border-color: #757575;
}
/* test */
*{box-sizing:border-box;
  }
div {
  position:relative;
  width : 700px;
  padding-right:1em;
  height:200px;
  }
div div {/* buffer for positionning*/
  position:static;
  padding:0;
  height:100%;
  overflow:auto;
}
table,
table thead:first-of-type {
  width: 100%;
  table-layout: fixed;
  /* sprays column evenly when no width set */
}
table thead:first-of-type {
  position: absolute;
  width: calc(100% - 1em - 1px);
  display: table;
  top: 0;
  background: white;
  left: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><div>
  <table>
    <thead>
      <tr>
        <th rowspan="2">Location</th>
        <th rowspan="2">Updated</th>
        <th colspan="2">Temperature [°C]</th>
        <th colspan="2">Wind [m/s]</th>
        <th rowspan="2">Air pressure [hPa]</th>
        <th rowspan="2">Relative humidity [%]</th>
        <th rowspan="2">Precipitation [mm]</th>
      </tr>
      <tr>
        <th>present</th>
        <th>wind chill</th>
        <th>speed</th>
        <th>max</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Aasiaat</td>
        <td>20.07 15:00</td>
        <td>9,3</td>
        <td></td>
        <td>2,5 &#8665;</td>
        <td>3,1</td>
        <td>1010</td>
        <td>87,1</td>
        <td>0,0</td>
      </tr>
      <tr>
        <td>Angisoq</td>
        <td>20.07 15:00</td>
        <td>5,9</td>
        <td></td>
        <td>3,6 &#8656;</td>
        <td>4,6</td>
        <td>1013</td>
        <td>85,0</td>
        <td>n/a</td>
      </tr>
      <tr>
        <td>Aasiaat</td>
        <td>20.07 15:00</td>
        <td>9,3</td>
        <td></td>
        <td>2,5 &#8665;</td>
        <td>3,1</td>
        <td>1010</td>
        <td>87,1</td>
        <td>0,0</td>
      </tr>
      <tr>
        <td>Test3</td>
        <td>20.07 15:00</td>
        <td>9,3</td>
        <td></td>
        <td>2,5 &#8665;</td>
        <td>3,1</td>
        <td>1010</td>
        <td>87,1</td>
        <td>0,0</td>
      </tr>
      <tr>
        <td>Test4</td>
        <td>20.07 15:00</td>
        <td>9,3</td>
        <td></td>
        <td>2,5 &#8665;</td>
        <td>3,1</td>
        <td>1010</td>
        <td>87,1</td>
        <td>0,0</td>
      </tr>
      <tr>
        <td>Test5</td>
        <td>20.07 15:00</td>
        <td>9,3</td>
        <td></td>
        <td>2,5 &#8665;</td>
        <td>3,1</td>
        <td>1010</td>
        <td>87,1</td>
        <td>0,0</td>
      </tr>
    </tbody>
  </table>
  </div>    
  </div>

＆＃13;

Answer 3

我为你准备了一个快速的代码。

以下是这个想法：

删除表头，并将其替换为模拟标头的固定容器。给表一个高度，并使溢出滚动。

标记：

<ul class="table-header">
  <li>Location</li>
  <li>Updated</li>
  <li>
    Temperature
    <ul>
      <li>present</li>
      <li>wind chill</li>
    </ul>
  </li>
  <li>
    Wind
    <ul>
      <li>speed</li>
      <li>max</li>
    </ul>
  </li>
  <li>Air pressure</li>
  <li>Relative humidity</li>
  <li>Precipitation</li>
</ul>

css：

table {
  width: 100%;
  margin-top: 60px;
  overflow: scroll;
  max-height: 200px;
}

.table-header {
  background-color: white;
  position: fixed;
  top: 0;
  left: 0;
  list-style: none;
  display: flex;
  padding-left: 0;
  justify-content: space-around;
  width: 100%;
  li {
    font-size: 1em;
    font-weight: 600;
    flex-grow: 1;
    text-align: center;
  }
  ul {
    display: flex;
    list-style: none;
    padding-left: 0;
    li {
      text-align: center;
      flex-grow: 1;
    }
  }
}

它并不完美，但你明白了。你只需要使用flex基础，并使顶部容器看起来像表头。

http://codepen.io/zsawaf/pen/mExAak

可滚动的表体和固定的标题

3 个答案: