是否可以使用支持水平和垂直滚动的纯CSS创建具有固定标题的表格？

时间：2015-01-08 14:43:59

标签： css

我试图用固定的标题创建一个可滚动的表格（水平和垂直）。该表将动态生成，包含8到20列。行数最多可达10,000个。

我在SO（https://stackoverflow.com/search?q=css+fixed+table+headers）和其他地方看到过类似的例子。但是，我似乎无法找到允许水平滚动的纯CSS 示例。我到目前为止最接近的是http://codepen.io/johnryan1982/pen/LExbvZ。如果有人可以提供一些指示，或者解释是否有可能，我会感激。

＆＃13;
＆＃13; 
section {
  width: 800px;
  height: 500px;
  overflow: scroll;
  margin: 10em auto;
}
#output {
  height: 100%;
  width: 100%;
  border-collapse: collapse;
}
colgroup {
  border: 1px solid grey;
}
thead {
  background-color: #333;
  color: #fdfdfd;
}
th,
td {
  padding: 5px;
  text-align: left;
}
.floatingHeader {
  background-color: red;
  position: fixed;
  top: 0%;
}
tbody {
  overflow: auto;
  width: 100%;
  height: 450px;
}
tbody tr:nth-child(even) {
  background-color: #eeeeee;
}
＆＃13; 
<section>
  <!-- IE < 10 does not like giving a tbody a height. The workaround here applies the scrolling to a wrapped <div>. -->
  <!--[if lte IE 9]>
  <div class="old_ie_wrapper">
  <!--<![endif]-->
  <table id="output">
    <colgroup></colgroup>
    <colgroup></colgroup>
    <colgroup></colgroup>
    <colgroup></colgroup>
    <colgroup></colgroup>
    <colgroup></colgroup>
    <colgroup></colgroup>
    <colgroup></colgroup>
    <colgroup></colgroup>
    <colgroup></colgroup>
    <colgroup></colgroup>
    <colgroup></colgroup>
    <colgroup></colgroup>
    <colgroup></colgroup>
    <colgroup></colgroup>
    <thead>
      <tr class="persistArea">
        <th>id</th>
        <th>status</th>
        <th>priority</th>
        <th>reporter</th>
        <th>timestamp</th>
        <th>col_A</th>
        <th>col_B</th>
        <th>col_C</th>
        <th>col_D</th>
        <th>col_E</th>
        <th>col_F</th>
        <th>col_G</th>
        <th>col_H</th>
        <th>col_I</th>
        <th>col_J</th>
      </tr>
      <tr class="persistArea floatingHeader">
        <th>id</th>
        <th>status</th>
        <th>priority</th>
        <th>reporter</th>
        <th>timestamp</th>
        <th>col_A</th>
        <th>col_B</th>
        <th>col_C</th>
        <th>col_D</th>
        <th>col_E</th>
        <th>col_F</th>
        <th>col_G</th>
        <th>col_H</th>
        <th>col_I</th>
        <th>col_J</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Unassigned</td>
        <td>Medium</td>
        <td>Paul</td>
        <td>1419592785</td>
        <td>col_A_val</td>
        <td>col_B_val</td>
        <td>col_C_val</td>
        <td>col_D_val</td>
        <td>col_E_val</td>
        <td>col_F_val</td>
        <td>col_G_val</td>
        <td>col_H_val</td>
        <td>col_I_val</td>
        <td>col_J_val</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Unassigned</td>
        <td>Medium</td>
        <td>Pete</td>
        <td>1420629585</td>
        <td>col_A_val</td>
        <td>col_B_val</td>
        <td>col_C_val</td>
        <td>col_D_val</td>
        <td>col_E_val</td>
        <td>col_F_val</td>
        <td>col_G_val</td>
        <td>col_H_val</td>
        <td>col_I_val</td>
        <td>col_J_val</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Unassigned</td>
        <td>Medium</td>
        <td>John</td>
        <td>1420629585</td>
        <td>col_A_val</td>
        <td>col_B_val</td>
        <td>col_C_val</td>
        <td>col_D_val</td>
        <td>col_E_val</td>
        <td>col_F_val</td>
        <td>col_G_val</td>
        <td>col_H_val</td>
        <td>col_I_val</td>
        <td>col_J_val</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Unassigned</td>
        <td>Medium</td>
        <td>Ringo</td>
        <td>1420283986</td>
        <td>col_A_val</td>
        <td>col_B_val</td>
        <td>col_C_val</td>
        <td>col_D_val</td>
        <td>col_E_val</td>
        <td>col_F_val</td>
        <td>col_G_val</td>
        <td>col_H_val</td>
        <td>col_I_val</td>
        <td>col_J_val</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Unassigned</td>
        <td>Medium</td>
        <td>Ringo</td>
        <td>1420629586</td>
        <td>col_A_val</td>
        <td>col_B_val</td>
        <td>col_C_val</td>
        <td>col_D_val</td>
        <td>col_E_val</td>
        <td>col_F_val</td>
        <td>col_G_val</td>
        <td>col_H_val</td>
        <td>col_I_val</td>
        <td>col_J_val</td>
      </tr>
      <tr>
        <td>6</td>
        <td>Unassigned</td>
        <td>Medium</td>
        <td>Pete</td>
        <td>1418296786</td>
        <td>col_A_val</td>
        <td>col_B_val</td>
        <td>col_C_val</td>
        <td>col_D_val</td>
        <td>col_E_val</td>
        <td>col_F_val</td>
        <td>col_G_val</td>
        <td>col_H_val</td>
        <td>col_I_val</td>
        <td>col_J_val</td>
      </tr>
      <tr>
        <td>7</td>
        <td>Unassigned</td>
        <td>Medium</td>
        <td>Paul</td>
        <td>1420283986</td>
        <td>col_A_val</td>
        <td>col_B_val</td>
        <td>col_C_val</td>
        <td>col_D_val</td>
        <td>col_E_val</td>
        <td>col_F_val</td>
        <td>col_G_val</td>
        <td>col_H_val</td>
        <td>col_I_val</td>
        <td>col_J_val</td>
      </tr>
      <tr>
        <td>8</td>
        <td>Unassigned</td>
        <td>Medium</td>
        <td>Pete</td>
        <td>1420629587</td>
        <td>col_A_val</td>
        <td>col_B_val</td>
        <td>col_C_val</td>
        <td>col_D_val</td>
        <td>col_E_val</td>
        <td>col_F_val</td>
        <td>col_G_val</td>
        <td>col_H_val</td>
        <td>col_I_val</td>
        <td>col_J_val</td>
      </tr>
      <tr>
        <td>9</td>
        <td>Unassigned</td>
        <td>Medium</td>
        <td>Pete</td>
        <td>1418987987</td>
        <td>col_A_val</td>
        <td>col_B_val</td>
        <td>col_C_val</td>
        <td>col_D_val</td>
        <td>col_E_val</td>
        <td>col_F_val</td>
        <td>col_G_val</td>
        <td>col_H_val</td>
        <td>col_I_val</td>
        <td>col_J_val</td>
      </tr>
      <tr>
        <td>10</td>
        <td>Unassigned</td>
        <td>Medium</td>
        <td>Pete</td>
        <td>1420283987</td>
        <td>col_A_val</td>
        <td>col_B_val</td>
        <td>col_C_val</td>
        <td>col_D_val</td>
        <td>col_E_val</td>
        <td>col_F_val</td>
        <td>col_G_val</td>
        <td>col_H_val</td>
        <td>col_I_val</td>
        <td>col_J_val</td>
      </tr>
      <tr>
        <td>11</td>
        <td>Unassigned</td>
        <td>Medium</td>
        <td>Ringo</td>
        <td>1419247188</td>
        <td>col_A_val</td>
        <td>col_B_val</td>
        <td>col_C_val</td>
        <td>col_D_val</td>
        <td>col_E_val</td>
        <td>col_F_val</td>
        <td>col_G_val</td>
        <td>col_H_val</td>
        <td>col_I_val</td>
        <td>col_J_val</td>
      </tr>
      <tr>
        <td>12</td>
        <td>Unassigned</td>
        <td>Medium</td>
        <td>Ringo</td>
        <td>1420629588</td>
        <td>col_A_val</td>
        <td>col_B_val</td>
        <td>col_C_val</td>
        <td>col_D_val</td>
        <td>col_E_val</td>
        <td>col_F_val</td>
        <td>col_G_val</td>
        <td>col_H_val</td>
        <td>col_I_val</td>
        <td>col_J_val</td>
      </tr>
      <tr>
        <td>13</td>
        <td>Unassigned</td>
        <td>Medium</td>
        <td>Ringo</td>
        <td>1420111188</td>
        <td>col_A_val</td>
        <td>col_B_val</td>
        <td>col_C_val</td>
        <td>col_D_val</td>
        <td>col_E_val</td>
        <td>col_F_val</td>
        <td>col_G_val</td>
        <td>col_H_val</td>
        <td>col_I_val</td>
        <td>col_J_val</td>
      </tr>
      <tr>
        <td>14</td>
        <td>Unassigned</td>
        <td>Medium</td>
        <td>Pete</td>
        <td>1420111188</td>
        <td>col_A_val</td>
        <td>col_B_val</td>
        <td>col_C_val</td>
        <td>col_D_val</td>
        <td>col_E_val</td>
        <td>col_F_val</td>
        <td>col_G_val</td>
        <td>col_H_val</td>
        <td>col_I_val</td>
        <td>col_J_val</td>
      </tr>
      <tr>
        <td>15</td>
        <td>Unassigned</td>
        <td>Medium</td>
        <td>Pete</td>
        <td>1420111189</td>
        <td>col_A_val</td>
        <td>col_B_val</td>
        <td>col_C_val</td>
        <td>col_D_val</td>
        <td>col_E_val</td>
        <td>col_F_val</td>
        <td>col_G_val</td>
        <td>col_H_val</td>
        <td>col_I_val</td>
        <td>col_J_val</td>
      </tr>
      <tr>
        <td>16</td>
        <td>Unassigned</td>
        <td>Medium</td>
        <td>Pete</td>
        <td>1420629589</td>
        <td>col_A_val</td>
        <td>col_B_val</td>
        <td>col_C_val</td>
        <td>col_D_val</td>
        <td>col_E_val</td>
        <td>col_F_val</td>
        <td>col_G_val</td>
        <td>col_H_val</td>
        <td>col_I_val</td>
        <td>col_J_val</td>
      </tr>
      <tr>
        <td>17</td>
        <td>Unassigned</td>
        <td>Medium</td>
        <td>Ringo</td>
        <td>1420456789</td>
        <td>col_A_val</td>
        <td>col_B_val</td>
        <td>col_C_val</td>
        <td>col_D_val</td>
        <td>col_E_val</td>
        <td>col_F_val</td>
        <td>col_G_val</td>
        <td>col_H_val</td>
        <td>col_I_val</td>
        <td>col_J_val</td>
      </tr>
      <tr>
        <td>18</td>
        <td>Unassigned</td>
        <td>Medium</td>
        <td>Paul</td>
        <td>1419938389</td>
        <td>col_A_val</td>
        <td>col_B_val</td>
        <td>col_C_val</td>
        <td>col_D_val</td>
        <td>col_E_val</td>
        <td>col_F_val</td>
        <td>col_G_val</td>
        <td>col_H_val</td>
        <td>col_I_val</td>
        <td>col_J_val</td>
      </tr>
      <tr>
        <td>19</td>
        <td>Unassigned</td>
        <td>Medium</td>
        <td>Pete</td>
        <td>1419938390</td>
        <td>col_A_val</td>
        <td>col_B_val</td>
        <td>col_C_val</td>
        <td>col_D_val</td>
        <td>col_E_val</td>
        <td>col_F_val</td>
        <td>col_G_val</td>
        <td>col_H_val</td>
        <td>col_I_val</td>
        <td>col_J_val</td>
      </tr>
      <tr>
        <td>20</td>
        <td>Unassigned</td>
        <td>Medium</td>
        <td>John</td>
        <td>1418210390</td>
        <td>col_A_val</td>
        <td>col_B_val</td>
        <td>col_C_val</td>
        <td>col_D_val</td>
        <td>col_E_val</td>
        <td>col_F_val</td>
        <td>col_G_val</td>
        <td>col_H_val</td>
        <td>col_I_val</td>
        <td>col_J_val</td>
      </tr>
      <tr>
        <td>21</td>
        <td>Unassigned</td>
        <td>Medium</td>
        <td>Ringo</td>
        <td>1420629590</td>
        <td>col_A_val</td>
        <td>col_B_val</td>
        <td>col_C_val</td>
        <td>col_D_val</td>
        <td>col_E_val</td>
        <td>col_F_val</td>
        <td>col_G_val</td>
        <td>col_H_val</td>
        <td>col_I_val</td>
        <td>col_J_val</td>
      </tr>
      <tr>
        <td>22</td>
        <td>Unassigned</td>
        <td>Medium</td>
        <td>Pete</td>
        <td>1419765590</td>
        <td>col_A_val</td>
        <td>col_B_val</td>
        <td>col_C_val</td>
        <td>col_D_val</td>
        <td>col_E_val</td>
        <td>col_F_val</td>
        <td>col_G_val</td>
        <td>col_H_val</td>
        <td>col_I_val</td>
        <td>col_J_val</td>
      </tr>
      <tr>
        <td>23</td>
        <td>Unassigned</td>
        <td>Medium</td>
        <td>George</td>
        <td>1419851991</td>
        <td>col_A_val</td>
        <td>col_B_val</td>
        <td>col_C_val</td>
        <td>col_D_val</td>
        <td>col_E_val</td>
        <td>col_F_val</td>
        <td>col_G_val</td>
        <td>col_H_val</td>
        <td>col_I_val</td>
        <td>col_J_val</td>
      </tr>
      <tr>
        <td>24</td>
        <td>Unassigned</td>
        <td>Medium</td>
        <td>George</td>
        <td>1420629591</td>
        <td>col_A_val</td>
        <td>col_B_val</td>
        <td>col_C_val</td>
        <td>col_D_val</td>
        <td>col_E_val</td>
        <td>col_F_val</td>
        <td>col_G_val</td>
        <td>col_H_val</td>
        <td>col_I_val</td>
        <td>col_J_val</td>
      </tr>
      <tr>
        <td>25</td>
        <td>Unassigned</td>
        <td>Medium</td>
        <td>Pete</td>
        <td>1419592791</td>
        <td>col_A_val</td>
        <td>col_B_val</td>
        <td>col_C_val</td>
        <td>col_D_val</td>
        <td>col_E_val</td>
        <td>col_F_val</td>
        <td>col_G_val</td>
        <td>col_H_val</td>
        <td>col_I_val</td>
        <td>col_J_val</td>
      </tr>
      <tr>
        <td>26</td>
        <td>Unassigned</td>
        <td>Medium</td>
        <td>Paul</td>
        <td>1419938391</td>
        <td>col_A_val</td>
        <td>col_B_val</td>
        <td>col_C_val</td>
        <td>col_D_val</td>
        <td>col_E_val</td>
        <td>col_F_val</td>
        <td>col_G_val</td>
        <td>col_H_val</td>
        <td>col_I_val</td>
        <td>col_J_val</td>
      </tr>
      <tr>
        <td>27</td>
        <td>Unassigned</td>
        <td>Medium</td>
        <td>John</td>
        <td>1419765592</td>
        <td>col_A_val</td>
        <td>col_B_val</td>
        <td>col_C_val</td>
        <td>col_D_val</td>
        <td>col_E_val</td>
        <td>col_F_val</td>
        <td>col_G_val</td>
        <td>col_H_val</td>
        <td>col_I_val</td>
        <td>col_J_val</td>
      </tr>
      <tr>
        <td>28</td>
        <td>Unassigned</td>
        <td>Medium</td>
        <td>George</td>
        <td>1419765592</td>
        <td>col_A_val</td>
        <td>col_B_val</td>
        <td>col_C_val</td>
        <td>col_D_val</td>
        <td>col_E_val</td>
        <td>col_F_val</td>
        <td>col_G_val</td>
        <td>col_H_val</td>
        <td>col_I_val</td>
        <td>col_J_val</td>
      </tr>
      <tr>
        <td>29</td>
        <td>Unassigned</td>
        <td>Medium</td>
        <td>Ringo</td>
        <td>1419247192</td>
        <td>col_A_val</td>
        <td>col_B_val</td>
        <td>col_C_val</td>
        <td>col_D_val</td>
        <td>col_E_val</td>
        <td>col_F_val</td>
        <td>col_G_val</td>
        <td>col_H_val</td>
        <td>col_I_val</td>
        <td>col_J_val</td>
      </tr>
      <tr>
        <td>30</td>
        <td>Unassigned</td>
        <td>Medium</td>
        <td>John</td>
        <td>1420629592</td>
        <td>col_A_val</td>
        <td>col_B_val</td>
        <td>col_C_val</td>
        <td>col_D_val</td>
        <td>col_E_val</td>
        <td>col_F_val</td>
        <td>col_G_val</td>
        <td>col_H_val</td>
        <td>col_I_val</td>
        <td>col_J_val</td>
      </tr>
      <tr>
        <td>31</td>
        <td>Unassigned</td>
        <td>Medium</td>
        <td>George</td>
        <td>1419074393</td>
        <td>col_A_val</td>
        <td>col_B_val</td>
        <td>col_C_val</td>
        <td>col_D_val</td>
        <td>col_E_val</td>
        <td>col_F_val</td>
        <td>col_G_val</td>
        <td>col_H_val</td>
        <td>col_I_val</td>
        <td>col_J_val</td>
      </tr>
      <tr>
        <td>32</td>
        <td>Unassigned</td>
        <td>Medium</td>
        <td>Ringo</td>
        <td>1419247193</td>
        <td>col_A_val</td>
        <td>col_B_val</td>
        <td>col_C_val</td>
        <td>col_D_val</td>
        <td>col_E_val</td>
        <td>col_F_val</td>
        <td>col_G_val</td>
        <td>col_H_val</td>
        <td>col_I_val</td>
        <td>col_J_val</td>
      </tr>
      <tr>
        <td>33</td>
        <td>Unassigned</td>
        <td>Medium</td>
        <td>Pete</td>
        <td>1419765593</td>
        <td>col_A_val</td>
        <td>col_B_val</td>
        <td>col_C_val</td>
        <td>col_D_val</td>
        <td>col_E_val</td>
        <td>col_F_val</td>
        <td>col_G_val</td>
        <td>col_H_val</td>
        <td>col_I_val</td>
        <td>col_J_val</td>
      </tr>
      <tr>
        <td>34</td>
        <td>Unassigned</td>
        <td>Medium</td>
        <td>Ringo</td>
        <td>1419074393</td>
        <td>col_A_val</td>
        <td>col_B_val</td>
        <td>col_C_val</td>
        <td>col_D_val</td>
        <td>col_E_val</td>
        <td>col_F_val</td>
        <td>col_G_val</td>
        <td>col_H_val</td>
        <td>col_I_val</td>
        <td>col_J_val</td>
      </tr>
      <tr>
        <td>35</td>
        <td>Unassigned</td>
        <td>Medium</td>
        <td>George</td>
        <td>1420629594</td>
        <td>col_A_val</td>
        <td>col_B_val</td>
        <td>col_C_val</td>
        <td>col_D_val</td>
        <td>col_E_val</td>
        <td>col_F_val</td>
        <td>col_G_val</td>
        <td>col_H_val</td>
        <td>col_I_val</td>
        <td>col_J_val</td>
      </tr>
      <tr>
        <td>36</td>
        <td>Unassigned</td>
        <td>Medium</td>
        <td>John</td>
        <td>1419592794</td>
        <td>col_A_val</td>
        <td>col_B_val</td>
        <td>col_C_val</td>
        <td>col_D_val</td>
        <td>col_E_val</td>
        <td>col_F_val</td>
        <td>col_G_val</td>
        <td>col_H_val</td>
        <td>col_I_val</td>
        <td>col_J_val</td>
      </tr>
      <tr>
        <td>37</td>
        <td>Unassigned</td>
        <td>Medium</td>
        <td>John</td>
        <td>1419074394</td>
        <td>col_A_val</td>
        <td>col_B_val</td>
        <td>col_C_val</td>
        <td>col_D_val</td>
        <td>col_E_val</td>
        <td>col_F_val</td>
        <td>col_G_val</td>
        <td>col_H_val</td>
        <td>col_I_val</td>
        <td>col_J_val</td>
      </tr>
      <tr>
        <td>38</td>
        <td>Unassigned</td>
        <td>Medium</td>
        <td>Ringo</td>
        <td>1419592794</td>
        <td>col_A_val</td>
        <td>col_B_val</td>
        <td>col_C_val</td>
        <td>col_D_val</td>
        <td>col_E_val</td>
        <td>col_F_val</td>
        <td>col_G_val</td>
        <td>col_H_val</td>
        <td>col_I_val</td>
        <td>col_J_val</td>
      </tr>
      <tr>
        <td>39</td>
        <td>Unassigned</td>
        <td>Medium</td>
        <td>George</td>
        <td>1418555995</td>
        <td>col_A_val</td>
        <td>col_B_val</td>
        <td>col_C_val</td>
        <td>col_D_val</td>
        <td>col_E_val</td>
        <td>col_F_val</td>
        <td>col_G_val</td>
        <td>col_H_val</td>
        <td>col_I_val</td>
        <td>col_J_val</td>
      </tr>
      <tr>
        <td>40</td>
        <td>Unassigned</td>
        <td>Medium</td>
        <td>Paul</td>
        <td>1418901595</td>
        <td>col_A_val</td>
        <td>col_B_val</td>
        <td>col_C_val</td>
        <td>col_D_val</td>
        <td>col_E_val</td>
        <td>col_F_val</td>
        <td>col_G_val</td>
        <td>col_H_val</td>
        <td>col_I_val</td>
        <td>col_J_val</td>
      </tr>
      <tr>
        <td>41</td>
        <td>Unassigned</td>
        <td>Medium</td>
        <td>George</td>
        <td>1419938395</td>
        <td>col_A_val</td>
        <td>col_B_val</td>
        <td>col_C_val</td>
        <td>col_D_val</td>
        <td>col_E_val</td>
        <td>col_F_val</td>
        <td>col_G_val</td>
        <td>col_H_val</td>
        <td>col_I_val</td>
        <td>col_J_val</td>
      </tr>
      <tr>
        <td>42</td>
        <td>Unassigned</td>
        <td>Medium</td>
        <td>George</td>
        <td>1420197595</td>
        <td>col_A_val</td>
        <td>col_B_val</td>
        <td>col_C_val</td>
        <td>col_D_val</td>
        <td>col_E_val</td>
        <td>col_F_val</td>
        <td>col_G_val</td>
        <td>col_H_val</td>
        <td>col_I_val</td>
        <td>col_J_val</td>
      </tr>
      <tr>
        <td>43</td>
        <td>Unassigned</td>
        <td>Medium</td>
        <td>Pete</td>
        <td>1419679196</td>
        <td>col_A_val</td>
        <td>col_B_val</td>
        <td>col_C_val</td>
        <td>col_D_val</td>
        <td>col_E_val</td>
        <td>col_F_val</td>
        <td>col_G_val</td>
        <td>col_H_val</td>
        <td>col_I_val</td>
        <td>col_J_val</td>
      </tr>
      <tr>
        <td>44</td>
        <td>Unassigned</td>
        <td>Medium</td>
        <td>John</td>
        <td>1419938396</td>
        <td>col_A_val</td>
        <td>col_B_val</td>
        <td>col_C_val</td>
        <td>col_D_val</td>
        <td>col_E_val</td>
        <td>col_F_val</td>
        <td>col_G_val</td>
        <td>col_H_val</td>
        <td>col_I_val</td>
        <td>col_J_val</td>
      </tr>
      <tr>
        <td>45</td>
        <td>Unassigned</td>
        <td>Medium</td>
        <td>Ringo</td>
        <td>1419938396</td>
        <td>col_A_val</td>
        <td>col_B_val</td>
        <td>col_C_val</td>
        <td>col_D_val</td>
        <td>col_E_val</td>
        <td>col_F_val</td>
        <td>col_G_val</td>
        <td>col_H_val</td>
        <td>col_I_val</td>
        <td>col_J_val</td>
      </tr>
      <tr>
        <td>46</td>
        <td>Unassigned</td>
        <td>Medium</td>
        <td>Paul</td>
        <td>1420283996</td>
        <td>col_A_val</td>
        <td>col_B_val</td>
        <td>col_C_val</td>
        <td>col_D_val</td>
        <td>col_E_val</td>
        <td>col_F_val</td>
        <td>col_G_val</td>
        <td>col_H_val</td>
        <td>col_I_val</td>
        <td>col_J_val</td>
      </tr>
      <tr>
        <td>47</td>
        <td>Unassigned</td>
        <td>Medium</td>
        <td>Paul</td>
        <td>1420629597</td>
        <td>col_A_val</td>
        <td>col_B_val</td>
        <td>col_C_val</td>
        <td>col_D_val</td>
        <td>col_E_val</td>
        <td>col_F_val</td>
        <td>col_G_val</td>
        <td>col_H_val</td>
        <td>col_I_val</td>
        <td>col_J_val</td>
      </tr>
      <tr>
        <td>48</td>
        <td>Unassigned</td>
        <td>Medium</td>
        <td>Ringo</td>
        <td>1418728797</td>
        <td>col_A_val</td>
        <td>col_B_val</td>
        <td>col_C_val</td>
        <td>col_D_val</td>
        <td>col_E_val</td>
        <td>col_F_val</td>
        <td>col_G_val</td>
        <td>col_H_val</td>
        <td>col_I_val</td>
        <td>col_J_val</td>
      </tr>
      <tr>
        <td>49</td>
        <td>Unassigned</td>
        <td>Medium</td>
        <td>Ringo</td>
        <td>1418987997</td>
        <td>col_A_val</td>
        <td>col_B_val</td>
        <td>col_C_val</td>
        <td>col_D_val</td>
        <td>col_E_val</td>
        <td>col_F_val</td>
        <td>col_G_val</td>
        <td>col_H_val</td>
        <td>col_I_val</td>
        <td>col_J_val</td>
      </tr>
      <tr>
        <td>50</td>
        <td>Unassigned</td>
        <td>Medium</td>
        <td>Pete</td>
        <td>1418815197</td>
        <td>col_A_val</td>
        <td>col_B_val</td>
        <td>col_C_val</td>
        <td>col_D_val</td>
        <td>col_E_val</td>
        <td>col_F_val</td>
        <td>col_G_val</td>
        <td>col_H_val</td>
        <td>col_I_val</td>
        <td>col_J_val</td>
      </tr>
    </tbody>
  </table>
  <!--[if lte IE 9]>
  </div>
  <!--<![endif]-->
</section>
＆＃13;
＆＃13;
＆＃13;

或者，我并不反对将其呈现为列表。这会更容易实现吗？

干杯！

2 个答案:

答案 0 :(得分：0)

我发现了这个..试试这个。 http://jsfiddle.net/T9Bhm/7/ 

    table {
        width: 100%;
    }

    thead, tbody, tr, td, th { display: block; }

    tr:after {
        content: ' ';
        display: block;
        visibility: hidden;
        clear: both;
    }

    thead th {
        height: 30px;

        /*text-align: left;*/
    }

    tbody {
        height: 120px;
        overflow-y: auto;
    }

    thead {
        /* fallback */
    }


    tbody td, thead th {
        width: 19.2%;
        float: left;
    }

这应该有助于解决这个问题。

答案 1 :(得分：0)

请检查我的答案。它会为您带来很大帮助

<div class="web-design-card box-shadow-aa selected-card" style="background-image: url(&quot;https://example.com/website_match/template_preview/divi_Carpenter.jpg&quot;);">

<span class="fit-icon checked-icon" style="width: 16px; height: 16px;"><svg width="11" height="9" viewBox="0 0 11 9" xmlns="http://www.w3.org/2000/svg"><path d="M3.64489 8.10164L0.158292 4.61504C-0.0511769 4.40557 -0.0511769 4.06594 0.158292 3.85645L0.916858 3.09786C1.12633 2.88837 1.46598 2.88837 1.67545 3.09786L4.02419 5.44658L9.05493 0.41586C9.2644 0.206391 9.60405 0.206391 9.81352 0.41586L10.5721 1.17445C10.7816 1.38392 10.7816 1.72355 10.5721 1.93303L4.40348 8.10166C4.19399 8.31113 3.85436 8.31113 3.64489 8.10164V8.10164Z"></path></svg></span>

<div class="hovered"><div class="sss"></div>

<div class="btn-p"><button class="preview-btn">Preview</button></div>

<p class="aaa">Theme by<a href="https://www.example.com/layouts/art-design/carpenter-home-page/live-demo" target="_blank" rel="noreferrer" class="author">Divi</a></p></div></div>

相关问题
最新问题