html - 表与位置 : absolute in IE (not Chrome) 不对齐

Question

我在使用 position: absolute; 时遇到问题；跨浏览器。

在 Chrome 中，表格看起来不错。一切都对齐了。请看以下内容:

/image/qhrAi.jpg

但是，在 IE (11) 中，顶部的列不会对齐。请看以下内容:

/image/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>

如有任何想法或意见，我们将不胜感激。

谢谢你的帮助!

Answer 1

从样式类“.tg .tg-sidebar”中删除“position: absolute”。为了使表响应，不需要位置样式。