table明明设置了固定值

最新推荐文章于 2024-05-21 17:47:26 发布

原创最新推荐文章于 2024-05-21 17:47:26 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

Html 同时被 2 个专栏收录

77 篇文章

订阅专栏

HTML5

31 篇文章

订阅专栏

在使用表格布局时，遇到IE8及以下版本显示异常的问题。原本设置好的固定宽度在这些浏览器中失效，导致布局混乱。经过研究发现，需要特别处理以适配IE的兼容性问题。

IE真的快把我搞死了 0.0

可爱的迷人的让人醉了的IE你真棒

今天用表格写一个4列的表格要实现的效果大概是这样的

确实用普通浏览器都没有问题很简单明了的一个表格嘛！用IE8以下的看就成这样子了

是不是醉了让我无从下手后来知道原来要这样写！

<table width="100%" style="table-layout:fixed;">

.wd-table{width:99%; border-width:thin; border-collapse:collapse; color:#505051; color: #333;  font-size:12px; }
.wd_td ,.wd_th{ padding:8px;}.wd_tr{ height:42px; }
.wd_th{ text-align:right; width:120px; background:#F3F3F4; padding-right:3px;font-weight: bold;}

<table class="wd-table" width="100%"   style="table-layout:fixed;">     
  <tr class="wd_tr">
    <td class="wd_th">职岗描述：</td>
    <td class="wd_td">不限</td>
    <td class="wd_th">职岗描述：</td>
    <td class="wd_td">不限</td>
  </tr>
  <tr class="wd_tr">
    <td class="wd_th">职岗描述：</td>
    <td class="wd_td">不限</td>
    <td class="wd_th">职岗描述：</td>
    <td class="wd_td">不限</td>
  </tr>
  <tr class="wd_tr">
    <td class="wd_th">职岗描述：</td>
    <td class="wd_td">不限</td>
    <td class="wd_th">职岗描述：</td>
    <td class="wd_td">不限</td>
  </tr>
  <tr class="wd_tr">
    <td class="wd_th">职岗描述：</td>
    <td class="wd_td">不限</td>
    <td class="wd_th">职岗描述：</td>
    <td class="wd_td">不限</td>
  </tr>
    <tr class="wd_tr">
    <td class="wd_th">职岗描述：</td>
    <td colspan="3" class="wd_td">岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗</td>
    </tr>
  <tr class="wd_tr">
    <td class="wd_th">职岗描述：</td>
    <td colspan="3" class="wd_td">岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗岗</td>
    </tr>
</table>

我的博客点击送我温暖哦~ 猿媛员~~~~·