与冷冻标头的表与垂直的文本

I wish to create a table where the thread is frozen and the labels in the thead are orientated in a vertical manner. My attempt is below, however there are a number of issues with this implementation since I am very new to css.

我希望创建一个表格，其中线程被冻结，并且thead中的标签以垂直方式定向。我的尝试在下面，但是由于我对css很新，所以这个实现存在许多问题。

1. One thing I don't like about my solution is that it is not obvious that there are more rows to be scrolled into view as the scroll bar is hidden until you start scrolling the table. Is there a way of making the scroll bar permanently visible?

   关于我的解决方案，我不喜欢的一件事是，在您开始滚动表格之前，滚动条是隐藏的，因此有更多的行可以滚动到视图中并不明显。有没有办法让滚动条永久可见？

2. There is also a large scape at the top of the thead above where the party names are displayed. I can make this gap bigger by playing around with the values in th.vertical but I cant eliminate it. How can I force the thead to be only as high as the text it contains?

   在上面的thead顶部还有一个大型景观，其中显示了聚会名称。我可以通过在th.vertical中使用值来扩大这个差距，但我无法消除它。如何强制thead仅与其包含的文本一样高？

3. Finally, I would like the vertical text in the thead to be centred with respect to the column values but I haven't figured out how to do this. How might I do this?

   最后，我希望thead中的垂直文本相对于列值居中，但我还没想出如何做到这一点。我怎么能这样做？

4. I would also like to be able to sort on any column.

   我也希望能够对任何专栏进行排序。

table thead tr {
  display: block;
}

table th,
table td {
  width: 75px; //fixed width
}

div.vertical {
  margin-left: -100px;
  position: absolute;
  width: 210px;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  /* Safari/Chrome */
  -moz-transform: rotate(-90deg);
  /* Firefox */
  -o-transform: rotate(-90deg);
  /* Opera */
  -ms-transform: rotate(-90deg);
  /* IE 9 */
}

th.vertical {
  height: 60px;
  line-height: 14px;
  padding-bottom: 100px;
  text-align: left;
}

table tbody {
  display: block;
  height: 500px;
  overflow: auto;
}

<table class='vrt-header'>
  <thead>
    <tr>
      <th></th>
      <th class="vertical">
        <div class="vertical">Republican</div>
      </th>
      <th class="vertical">
        <div class="vertical">Democrat</div>
      </th>
      <th class="vertical">
        <div class="vertical">Libertarian</div>
      </th>
      <th class="vertical">
        <div class="vertical">Green</div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        Alabama
      </td>
      <td>
        65
      </td>
      <td>
        25
      </td>
      <td>
        10
      </td>
      <td>
        0
      </td>
    </tr>

    <tr>
      <td>
        Alaska
      </td>
      <td>
        75
      </td>
      <td>
        15
      </td>
      <td>
        10
      </td>
      <td>
        0
      </td>
    </tr>

    <tr>
      <td>
        Arizona
      </td>
      <td>
        55
      </td>
      <td>
        40
      </td>
      <td>
        5
      </td>
      <td>
        0
      </td>
    </tr>

    <tr>
      <td>
        Arkansas
      </td>
      <td>
        65
      </td>
      <td>
        25
      </td>
      <td>
        10
      </td>
      <td>
        0
      </td>
    </tr>

    <tr>
      <td>
        California
      </td>
      <td>
        25
      </td>
      <td>
        65
      </td>
      <td>
        3
      </td>
      <td>
        7
      </td>
    </tr>

    <tr>
      <td>
        ?
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
    </tr>

    <tr>
      <td>
        ?
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
    </tr>

    <tr>
      <td>
        ?
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
    </tr>

    <tr>
      <td>
        ?
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
    </tr>

    <tr>
      <td>
        ?
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
    </tr>

    <tr>
      <td>
        ?
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
    </tr>

    <tr>
      <td>
        ?
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
    </tr>

    <tr>
      <td>
        ?
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
    </tr>

    <tr>
      <td>
        ?
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
    </tr>

    <tr>
      <td>
        ?
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
    </tr>

    <tr>
      <td>
        ?
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
    </tr>

    <tr>
      <td>
        ?
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
    </tr>

    <tr>
      <td>
        ?
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
    </tr>

    <tr>
      <td>
        ?
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
    </tr>

    <tr>
      <td>
        ?
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
    </tr>

    <tr>
      <td>
        ?
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
    </tr>

    <tr>
      <td>
        ?
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
    </tr>

    <tr>
      <td>
        ?
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
    </tr>

    <tr>
      <td>
        ?
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
    </tr>

    <tr>
      <td>
        ?
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
    </tr>

    <tr>
      <td>
        ?
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
    </tr>

    <tr>
      <td>
        ?
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
    </tr>

    <tr>
      <td>
        ?
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
    </tr>

    <tr>
      <td>
        ?
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
    </tr>

    <tr>
      <td>
        ?
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
    </tr>
  </tbody>
</table>

4 个解决方案

#1

I've played with your code…

我玩过你的代码......

1. I don't know about another way to always show the scrollbar than overflow-y: scroll;.
2. 我不知道另一种总是显示滚动条的方法而不是overflow-y：scroll;。
3. I modified all the styling of your headers, but I couldn't find an easy way to automatically adjust the height after your transform. I used a fixed value.
4. 我修改了标题的所有样式，但是我找不到一种简单的方法来在变换后自动调整高度。我使用了固定值。
5. The new styling is correcting this point.
6. 新造型正在纠正这一点。
7. I suggest you to try and read about the Stupid-Table-Plugin for jQuery to easily sort a table.
8. 我建议你尝试阅读有关jQuery的Stupid-Table-Plugin以轻松排序表。

… Plus, I added:

...另外，我补充说：

• Some styling on :hover to highlight the action on the ths.
• 一些造型：悬停以突出显示该动作。
• An alternation of color for the rows, using the :nth-of-type() selector.
• 使用：nth-​​of-type（）选择器替换行的颜色。

… and I ended-up with this snippet:

......我最终得到了这个片段：

// Doc here: https://joequery.github.io/Stupid-Table-Plugin/
$("#simpleTable").stupidtable();

table thead,
table tbody {
  display: block;
}

table tbody {
  height: 500px;
  overflow-y: scroll; /* To make the scroll bar always visible */
}

thead th {
  position: relative;
  cursor: pointer; /* change cursor to show we can do an action */
  height: 90px;
  background: #ccc;
  border-bottom: 2px solid black;
}

thead th:hover {
  background: #ccf; /* Styling on hover */
}

thead th p {
  position: absolute;
  bottom: 20px;
  transform: rotate(-90deg);
  text-align: left;
}

table th,
table th p,
table td {
  width: 75px;
}

table td {
  text-align: center;
}

table tr td:first-of-type {
  text-align: left;
}

table tr:nth-of-type(odd) td {
  background: #eee;
}

table tr:nth-of-type(even) td {
  background: #ddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stupidtable/1.1.3/stupidtable.min.js"></script>

<table id="simpleTable" class='vrt-header'>

  <thead>
    <tr>
      <th data-sort="string"></th>
      <th data-sort="int">
        <p>Republican</p>
      </th>
      <th data-sort="int">
        <p>Democrat</p>
      </th>
      <th data-sort="int">
        <p>Libertarian</p>
      </th>
      <th data-sort="int">
        <p>Green</p>
      </th>
    </tr>
  </thead>

  <tbody>

    <tr>
      <td>
        Alabama
      </td>
      <td>
        65
      </td>
      <td>
        25
      </td>
      <td>
        10
      </td>
      <td>
        0
      </td>
    </tr>

    <tr>
      <td>
        Alaska
      </td>
      <td>
        75
      </td>
      <td>
        15
      </td>
      <td>
        10
      </td>
      <td>
        0
      </td>
    </tr>

    <tr>
      <td>
        Arizona
      </td>
      <td>
        55
      </td>
      <td>
        40
      </td>
      <td>
        5
      </td>
      <td>
        0
      </td>
    </tr>

    <tr>
      <td>
        Arkansas
      </td>
      <td>
        65
      </td>
      <td>
        25
      </td>
      <td>
        10
      </td>
      <td>
        0
      </td>
    </tr>

    <tr>
      <td>
        California
      </td>
      <td>
        25
      </td>
      <td>
        65
      </td>
      <td>
        3
      </td>
      <td>
        7
      </td>
    </tr>

    <tr>
      <td>
        ?
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
    </tr>

    <tr>
      <td>
        ?
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
    </tr>

    <tr>
      <td>
        ?
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
    </tr>

    <tr>
      <td>
        ?
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
    </tr>

    <tr>
      <td>
        ?
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
    </tr>

    <tr>
      <td>
        ?
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
    </tr>

    <tr>
      <td>
        ?
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
    </tr>

    <tr>
      <td>
        ?
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
    </tr>

    <tr>
      <td>
        ?
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
    </tr>

    <tr>
      <td>
        ?
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
    </tr>

    <tr>
      <td>
        ?
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
    </tr>

    <tr>
      <td>
        ?
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
    </tr>

    <tr>
      <td>
        ?
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
    </tr>

    <tr>
      <td>
        ?
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
    </tr>

    <tr>
      <td>
        ?
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
    </tr>

    <tr>
      <td>
        ?
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
    </tr>

    <tr>
      <td>
        ?
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
    </tr>

    <tr>
      <td>
        ?
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
    </tr>

    <tr>
      <td>
        ?
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
    </tr>

    <tr>
      <td>
        ?
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
    </tr>

    <tr>
      <td>
        ?
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
    </tr>

    <tr>
      <td>
        ?
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
    </tr>

    <tr>
      <td>
        ?
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
    </tr>

    <tr>
      <td>
        ?
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
    </tr>

    <tr>
      <td>
        ?
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
      <td>
        0
      </td>
    </tr>

  </tbody>


</table>

Hope it helps.

希望能帮助到你。

#2

1) This is probably on a mac, which uses overlay scrollbars by default. Chrome and Safari support webkit-scroll properties that let you make it always visible, but not sure if you can override that in Firefox.

1）这可能是在mac上，默认情况下使用覆盖滚动条。 Chrome和Safari支持webkit-scroll属性，可让您始终可见，但不确定是否可以在Firefox中覆盖它。

2) You may be running into the UA style sheet 's th entry: td, th { padding: 1px; } You can override it with th { padding: 0px; }

2）你可能正在进入UA样式表的第一个条目：td，th {padding：1px;你可以使用th {padding：0px; }

3) What you want is actually the default behavior of a table. But it isn't working for two reasons. This might be the toughest to tackle on your own, without using an off-the-shelf component. So unless you're doing this as an exercise I suggest not trying to reinvent the wheel. Instead, find a jquery plugin or angular component or something that provides this. I don't think it's possible to do all this (including rotating the headers) in a cross-browser compatible way without writing a bunch of javascript.

3）你想要的实际上是表的默认行为。但它有两个原因并不起作用。如果不使用现成的组件，这可能是您自己最难解决的问题。因此，除非你做这个练习，否则我建议你不要试图重新发明*。相反，找到一个jquery插件或角度组件或提供此功能的东西。我不认为可以以跨浏览器兼容的方式完成所有这些（包括旋转标题），而无需编写一堆javascript。

First reason is that setting div.vertical { position:absolute } takes them out of normal flow; the th positions its normal-flow children to align with the whole column, but not position:absolute stuff.

第一个原因是设置div.vertical {position：absolute}会使它们脱离正常流程; th将其正常流动的孩子定位为与整列对齐，但不是位置：绝对的东西。

Second is you subtly created 3 tables because of tr { display:block } and the tbody {display:block} that allows scrolling. The layout code (approximately) sees them as a regular <div>s so sees <table><thead><div>...</div></thead><div>....</div></table> and creates a table cell, row, and section (aka tbody) to hold each <div>. Then inside that div it sees tr so creates a table to hold them.

其次是你巧妙地创建了3个表，因为tr {display：block}和允许滚动的tbody {display：block}。布局代码（大约）将它们视为常规

，所以看到

...

.... 并创建一个表格单元格，行和部分（也称为tbody）来保存每个

。然后在div中看到tr所以创建一个表来保存它们。

So the columns in the table that lives under thead > tr aren't the same columns that hold your data. So even if you fixed the first reason, you'd still be contending with this.

因此，表格中位于thead> tr下的列与保存数据的列不同。因此，即使您解决了第一个原因，您仍然会与此竞争。

Here's chrome's layout tree (ignore the hex):

这是chrome的布局树（忽略十六进制）：

 LayoutBlockFlow 0x23e069224010         HTML
    LayoutBlockFlow 0x23e069224138      BODY
      LayoutTable 0x23e069230010        TABLE class="vrt-header"
        LayoutTableSection 0x23e069240010   THEAD
          LayoutTableRow (anonymous) 0x23e06924c010
            LayoutTableCell (anonymous) 0x23e069254010
              LayoutBlockFlow 0x23e069224260    TR
                LayoutTable (anonymous) 0x23e0692301b0
                  LayoutTableSection (anonymous) 0x23e069240188
                    LayoutTableRow (anonymous) 0x23e06924c128
                      LayoutTableCell 0x23e069254150    TH
                      LayoutTableCell 0x23e069254290    TH class="vertical"
                        LayoutBlockFlow (positioned) 0x23e069224388 DIV class="vertical"
                          LayoutText 0x23e069264010 #text "Republican"
                      LayoutTableCell 0x23e0692543d0    TH class="vertical"
                        LayoutBlockFlow (positioned) 0x23e0692244b0 DIV class="vertical"
                          LayoutText 0x23e0692640e0 #text "Democrat"
                      LayoutTableCell 0x23e069254510    TH class="vertical"
                        LayoutBlockFlow (positioned) 0x23e0692245d8 DIV class="vertical"
                          LayoutText 0x23e0692641b0 #text "Libertarian"
                      LayoutTableCell 0x23e069254650    TH class="vertical"
                        LayoutBlockFlow (positioned) 0x23e069224700 DIV class="vertical"
                          LayoutText 0x23e069264280 #text "Green"
        LayoutTableSection (anonymous) 0x23e069240300
          LayoutTableRow (anonymous) 0x23e06924c240
            LayoutTableCell (anonymous) 0x23e069254790
              LayoutBlockFlow 0x23e069224828    TBODY
                LayoutTable (anonymous) 0x23e069230350
                  LayoutTableSection (anonymous) 0x23e069240478
                    LayoutTableRow 0x23e06924c358   TR
                      LayoutTableCell 0x23e0692548d0    TD
                        LayoutText 0x23e069264350   #text "\nAlabama\n"
                      LayoutTableCell 0x23e069254a10    TD
                        LayoutText 0x23e069264420   #text "\n65\n"
                      LayoutTableCell 0x23e069254b50    TD
                        LayoutText 0x23e0692644f0   #text "\n25\n"
                      LayoutTableCell 0x23e069254c90    TD
                        LayoutText 0x23e0692645c0   #text "\n10\n"
                      LayoutTableCell 0x23e069254dd0    TD
                        LayoutText 0x23e069264690   #text "\n0\n"
                    LayoutTableRow 0x23e06924c470   TR
                      LayoutTableCell 0x23e069254f10    TD
                        LayoutText 0x23e069264760   #text "\nAlaska\n"

#3

I did everything you requested, all 4 here, nearly with css-only.

我做了你要求的一切，这里全部4个，几乎只用css。

• Test it: https://jsfiddle.net/xpvt214o/246746/show or
• 测试它：https：//jsfiddle.net/xpvt214o/246746/show或
• see the code fiddle: https://jsfiddle.net/xpvt214o/246746/
• 看到代码小提琴：https：//jsfiddle.net/xpvt214o/246746/

I could also code the 3rd question with only CSS! I set the height using padding and a div wrapper for th. Like this:

我也可以只用CSS编写第三个问题！我使用padding和div包装器来设置高度。喜欢这个：

th.vertical {
  height: 0;
  vertical-align: bottom;
  text-align: left;
  cursor: pointer;
}
div.verticalWrapper {
    height: 0;
    padding-top: 100%;
    position: relative;
}

Note the padding-top: 100%

请注意填充顶部：100％

1) I created a table container div for this one.

1）我为这个创建了一个表容器div。

.tableContainer {
  height: 400px;
  width: 500px;
  overflow: scroll;
}

For iOS it is simply a matter of preference: https://heresthethingblog.com/2015/03/10/mac-tip-macs-scroll-bars/

对于iOS，它只是一个偏好的问题：https：//heresthethingblog.com/2015/03/10/mac-tip-macs-scroll-bars/

2) Since we are rotating the element, we need a height that is equal to width. I used css to do that and you can read related answer here

2）因为我们正在旋转元素，所以我们需要一个等于宽度的高度。我用css做了，你可以在这里阅读相关的答案

3) I used css transform.

3）我用css变换。

4) Used the same method as @takit-isy

4）使用与@ takit-isy相同的方法

#4

What you want to do is not an easy task. I would replace your tables with divs.

你想做的不是一件容易的事。我会用div替换你的表。

i wrote an example so you have an idea how it could look:

我写了一个例子，所以你知道它看起来如何：

    <div class='table'>
  <div class='header'>
  <div ><p class="vertical first">&nbsp;</p></div>
  <div ><p class="vertical">Republican</p></div>
      <div ><p class="vertical">Democrat</p></div>
      <div ><p class="vertical">Libertarian</p></div>
      <div ><p class="vertical">Green</p></div>
  </div>
  <div class='scroller'>
 <div class='content'>
    <div>
      <div>Alabama</div>
      <div>65</div>
      <div>25</div>
      <div>10</div>
      <div>0</div>
    </div>
    <div>
      <div>Alaska</div>
      <div>65</div>
      <div>25</div>
      <div>10</div>
      <div>0</div>
    </div>
    <div>
      <div>Arizona</div>
      <div>65</div>
      <div>25</div>
      <div>10</div>
      <div>0</div>
    </div>
    <div>
      <div>Arzkansas</div>
      <div>65</div>
      <div>25</div>
      <div>10</div>
      <div>0</div>
    </div>
    <div>
      <div>Arzkansas</div>
      <div>65</div>
      <div>25</div>
      <div>10</div>
      <div>0</div>
    </div>
      <div>
      <div>Arzkansas</div>
      <div>65</div>
      <div>25</div>
      <div>10</div>
      <div>0</div>
    </div>
  <div>
      <div>Arzkansas</div>
      <div>65</div>
      <div>25</div>
      <div>10</div>
      <div>0</div>
    </div>
    <div>
      <div>Arzkansas</div>
      <div>65</div>
      <div>25</div>
      <div>10</div>
      <div>0</div>
    </div>
    <div>
      <div>Arzkansas</div>
      <div>65</div>
      <div>25</div>
      <div>10</div>
      <div>0</div>
    </div>
    <div>
      <div>Arzkansas</div>
      <div>65</div>
      <div>25</div>
      <div>10</div>
      <div>0</div>
    </div>
    <div>
      <div>Arzkansas</div>
      <div>65</div>
      <div>25</div>
      <div>10</div>
      <div>0</div>
    </div>
    <div>
      <div>Arzkansas</div>
      <div>65</div>
      <div>25</div>
      <div>10</div>
      <div>0</div>
    </div>
    <div>
      <div>Arzkansas</div>
      <div>65</div>
      <div>25</div>
      <div>10</div>
      <div>0</div>
    </div>
    <div>
      <div>Arzkansas</div>
      <div>65</div>
      <div>25</div>
      <div>10</div>
      <div>0</div>
    </div>
    <div>
      <div>Arzkansas</div>
      <div>65</div>
      <div>25</div>
      <div>10</div>
      <div>0</div>
    </div>
  </div>
</div>
  </div>

.table{
  height:300px;
  width:500px;

}
.vertical{
  transform: rotate(-90deg);
  width:56px;
  margin:0px;
}
.first{
  padding-right: 268px;
}
.header{
  height:150px;
  width:500px;
  display:flex;
}
.header>div{
    display:flex;
  }
  .scroller{
     height:calc(100% - 50px);
     overflow-y:scroll;
  }
  .content{
    width:100%;
    display:table;
  }
.content>div{
  display:table-row;
  width:500px;
}
.content>div>div{
  display:table-cell;
}

http://jsfiddle.net/xjhun7zf/6/`

HTTP：// jsfiddle.net / xjhun7zf / 6 /`

(it is not perfect, because i wrote that in 20 minutes)

（这不完美，因为我在20分钟内写到了）

if you have 2 container, one for the head and one for the body, then you can set the head to a static position with a fixed height and your body with the rest height;

如果您有2个容器，一个用于头部，一个用于身体，那么您可以将头部设置为具有固定高度的静态位置，并将您的身体设置为其余高度;