Question

我使用position：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>

非常感谢任何想法或评论。

感谢您的帮助！

Answer 1

从样式类'.tg .tg-sidebar'中删除'position：absolute'。为了使表格具有响应性，不需要位置样式。

表位与位置不对齐：IE中的绝对值（不是Chrome）

1 个答案: