代码之家 › 专栏 › 技术社区 › Madhukar Kumbhar

带有固定标题的表格垂直滚动条是IE11中的Flickr

internet-explorer-11 css html

Madhukar Kumbhar · 技术社区 · 5 年前

我使用的是带有固定标题的表(表TH是固定的),所以表中有很多列。但在IE11中,垂直滚动条在水平滚动条之后闪烁。前任: https://codepen.io/springborg/pen/MvPmPP

<table>
  <thead>
    <th>foo</th><th>foo</th><th>foo</th><th>foo</th>
  </thead>
</table>

<div class="pane-vScroll">
  <table>
    <tbody>
      <tr><td>1</td><td>foo</td><td>foo</td><td>foo</td></tr>
      <tr><td>2</td><td>foo</td><td>foo</td><td>foo</td></tr>
      <tr><td>3</td><td>foo</td><td>foo</td><td>foo</td></tr>
      <tr><td>4</td><td>foo foo foo foo foo foo foo foo foo foo foo</td><td>foo</td><td>foo</td></tr>
      <tr><td>5</td><td>foo</td><td>foo</td><td>foo</td></tr>
      <tr><td>6</td><td>foo</td><td>foo</td><td>foo</td></tr>
      <tr><td>7</td><td>foo</td><td>foo</td><td>foo</td></tr>
      <tr><td>8</td><td>foo</td><td>foo</td><td>foo</td></tr>
      <tr><td>9</td><td>foo</td><td>foo</td><td>foo</td></tr>
      <tr><td>10</td><td>foo</td><td>foo</td><td>foo</td></tr>
      <tr><td>11</td><td>foo</td><td>foo</td><td>foo</td></tr>
      <tr><td>12</td><td>foo</td><td>foo</td><td>foo</td></tr>
      <tr><td>13</td><td>foo</td><td>foo</td><td>foo</td></tr>
      <tr><td>14</td><td>foo</td><td>foo</td><td>foo</td></tr>
      <tr><td>15</td><td>foo</td><td>foo</td><td>foo</td></tr>
      <tr><td>16</td><td>foo</td><td>foo</td><td>foo</td></tr>
      <tr><td>17</td><td>foo</td><td>foo</td><td>foo</td></tr>
      <tr><td>18</td><td>foo</td><td>foo</td><td>foo</td></tr>
      <tr><td>19</td><td>foo</td><td>foo</td><td>foo</td></tr>
      <tr><td>20</td><td>foo</td><td>foo</td><td>foo</td></tr>
      <tr><td>21</td><td>foo</td><td>foo</td><td>foo</td></tr>
      <tr><td>22</td><td>foo</td><td>foo</td><td>foo</td></tr>
      <tr><td>23</td><td>foo</td><td>foo</td><td>foo</td></tr>
      <tr><td>24</td><td>foo</td><td>foo</td><td>foo</td></tr>
      <tr><td>25</td><td>foo</td><td>foo</td><td>foo</td></tr>
      <tr><td>26</td><td>foo</td><td>foo</td><td>foo</td></tr>
      <tr><td>27</td><td>foo</td><td>foo</td><td>foo</td></tr>
      <tr><td>28</td><td>foo</td><td>foo</td><td>foo</td></tr>
      <tr><td>28</td><td>foo</td><td>foo</td><td>foo</td></tr>
      <tr><td>29</td><td>foo</td><td>foo</td><td>foo</td></tr>
      <tr><td>30</td><td>foo</td><td>foo</td><td>foo</td></tr>
    </tbody>
  </table>
</div>

enter image description here

0 回复 | 直到 5 年前

Zhi Lv 5 年前

我认为这个问题与CodePen网站有关,正如它所说的 in the popup modal “代码笔可能不会很好用”。

基于你的代码,我创建了一个示例,并在我的本地网站上进行了测试(使用IE11),看起来一切都很好,截图如下: