首页新闻找找看学习计划

IE8表格table中,max-width属性被误判为实际宽度?

0
悬赏园豆:20 [已关闭问题] 关闭于 2017-01-21 14:36

二话不说,先上代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
<style>
*
{
  margin: 0 auto;
  padding: 0;
}
body
{
  font: 14px/20px Microsoft YaHei, SimSun;
  text-align: center;
  color: #333;
  background: #fff;
}
table
{
  text-align: center;
  border-collapse: collapse;
  border-spacing: 0;
}
table th, table td
{
  padding: 3px 5px;
  border: 1px solid #dbdbdb;
}
.table
{
  width: 800px;
}
.ellipsis
{
  display: inline-block;
  max-width: 132px;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: middle;
  overflow: hidden;
}
</style>
</head>
<body>
<div class="table">
  <table width="100%">
    <thead>
      <tr>
        <th>课程代码</th>
        <th>课程名称</th>
        <th>开课部门</th>
        <th>开课教研室</th>
        <th>学分</th>
        <th>课程类别</th>
        <th>审核情况</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>251414</td>
        <td>中国远近古代史之(1)</td>
        <td><span class="ellipsis">这里的字数超10个会被截断,但是IE还是撑开了实际宽度
        </span></td>
        <td>历史古代教研室</td>
        <td>3</td>
        <td>必修课</td>
        <td>审核中</td>
      </tr>
    </tbody>
  </table>
</div>
</body>
</html>

 

项目要求如下:
1.兼容IE8+,而且td内的文本,超过10个字就截断,并出现省略号;


实现如下:
1.用js来控制字数并加...的方法,会加重页面加载负担,放弃了;
2.用table-fixed的方法来定平均td的方法,会限定td的宽度,美观性不好;
3.所以就想到用class="ellipsis"这个样式来实现,IE9-11以及其他浏览器正常;

问题如下:
1.唯独IE8下面,第三个td内文本虽然也截断加...符号了,但是这个td的实际宽度被撑宽了,宽度正好是所
有文字的宽度,使得这一格数据太长非常难看;
2.加上width:“11em”的话,IE8就表现正常了。但是文本没有超过10个字也会强制成10个字的宽度,所
以不太好...

想了好长时间,始终没有想到好办法,所以来求问一下各位,是否能帮忙看一下?不甚感激啊

子纯不语的主页 子纯不语 | 初学一级 | 园豆:182
提问于:2015-03-31 16:14
< >
分享
所有回答(2)
0

最好去专业的社区问问。

Firen | 园豆:5483 (大侠五级) | 2015-04-15 18:01
0

比如一个字是12px 十个字就是120px的宽度 再加上

position: relative; overflow: hidden; text-overflow: ellipsis;

完事!

匠人 | 园豆:280 (菜鸟二级) | 2015-12-14 17:15
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册