Стол смещение с позиции: абсолютный в IE (не Chrome)

У меня проблема с использованием позиции: absolute; в браузерах.

В Chrome таблица выглядит отлично. Все выровнено. См. Следующее:

https://i.stack.imgur.com/qhrAi.jpg

Однако в IE (11) верхняя часть столбцов не выстраивается в линию. См. Следующее:

https://i.stack.imgur.com/GgSpB.jpg

У меня первый столбец установлен на абсолютный, так что он фиксируется при прокрутке по горизонтали. Эффект прокрутки в обоих браузерах хорош, но в IE нет эстетики.

Вот стиль:

<style type="text/css">
.tg  {
    border-collapse:collapse;
    border-spacing:0;
    }

.tg td{
    font-family:Arial, sans-serif;
    font-size:14px;
    padding:10px 5px;
    border-style:solid;
    border-width:1px;
    overflow:hidden;
    word-break:normal;
    }

.tg th{
    font-family:Arial, sans-serif;
    font-size:14px;
    font-weight:normal;
    padding:10px 5px;
    border-style:solid;
    border-width:1px;
    overflow:hidden;
    word-break:normal;
    }

.tg .tg-941l{
    background-color:#ffc000;
    text-align:center;
    vertical-align:middle;
    }

.tg .tg-huo5{
    background-color:#ffc000;
    vertical-align:middle;
    }

.tg .tg-Sidebar{
    background-color:#ffc000;
    vertical-align:middle;
    position: absolute;
    }

.tg .tg-yw4l{
    vertical-align:top;
    }
</style>

И вот начало таблицы с первым td:

<table class="tg" style="undefined;table-layout: fixed; width: 1290px">
<colgroup>
<col style="width: 100px">
<col style="width: 58px">
<col style="width: 181px">
<col style="width: 62px">
<col style="width: 68px">
<col style="width: 42px">
<col style="width: 76px">
<col style="width: 52px">
<col style="width: 79px">
<col style="width: 67px">
<col style="width: 95px">
<col style="width: 90px">
<col style="width: 668px">
</colgroup>
  <tr>
    <th height="33" width="90" class="tg-Sidebar"><b>Assembly</b></th>
    <th class="tg-huo5">P/N</th>
    <th class="tg-huo5">CPU</th>
    <th class="tg-huo5">RAM</th>
    <th class="tg-huo5">Compact flash</th>
    <th class="tg-huo5">VDC input</th>
    <th class="tg-huo5">Power supply</th>
    <th class="tg-huo5">Ignite Online</th>
    <th class="tg-huo5">Introduced</th>
    <th class="tg-huo5">Last shipped</th>
    <th class="tg-huo5">History</th>
    <th class="tg-huo5">Field replacement</th>
    <th class="tg-huo5">Notes</th>
  </tr>
  <tr>

      <td height="49" width="90" class="tg-Sidebar"><b> BC-700 </b></td>
    <td class="tg-yw4l">50639</td>
    <td class="tg-yw4l">Intel Celeron, 400 MHz or VIA C3, 733 MHz</td>
    <td class="tg-yw4l">256 MB</td>
    <td class="tg-yw4l">1GB</td>
    <td class="tg-yw4l">5</td>
    <td class="tg-yw4l">50652, 50893, or 51146</td>
    <td class="tg-yw4l">No</td>
    <td class="tg-yw4l">2005</td>
    <td class="tg-yw4l">5/1/2009</td>
    <td class="tg-yw4l">Obsolete. Replaced by BC-710.</td>
    <td class="tg-yw4l">BC-711 and power supply</td>
    <td class="tg-yw4l">Original mid-end M86.</td>

  </tr>

Любые идеи или комментарии были бы весьма признательны.

Спасибо вам за помощь!

0
13 дек. '16 в 15:24
источник поделиться
1 ответ

Удалить 'position: absolute' из класса стиля '.tg.tg-sidebar'. Стиль позиции не нужен, чтобы таблица была отзывчивой.

0
13 дек. '16 в 15:59
источник

Посмотрите другие вопросы по меткам или Задайте вопрос