找回密码
 立即注册
首页 其他语言 HTML+CSS 查看内容
table直接用width和height赋值并不起作用.

解决方法:
看代码
<style>
    table{
    table-layout:fixed;  //table自适应
    }
    tbody td{
        overflow:hidden;  //隐藏容器外内容
        text-overflow:ellipsis; //隐藏的内容用...形式展示
        nowrap:false;  //禁止td折行显示
    }
    td div{
        height: 20px;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    </style>

为了防止数据超出页面.我们使用table-layout:fixed来控制表格大小,
然后在td使用overflow:hidden控制隐藏多余内容,
为了美观.使用text-overflow:ellipsis,
最后使用nowrap:false来防止折行
虽然上面的方法能很好的控制宽度,但是高度确不能控制.
怎么办?
最好的办法就是在td里面加个div来控制宽度.
代码如下:
<table class="table table-bordered table-hover">
        <thead>
        <tr>
            <td>应用名称</td>
            <td>应用logo</td>
            <td>应用地址</td>
            <td>应用描述</td>
            <td>加入时间</td>
            <td>操作</td>
        </tr>
        </thead>
        <tbody>
        {% for app in apps %}
        <tr>
            <td>{{ app.name }}</td>
            <td><a target="_blank" href="{{ app.logo_url }}">{{ app.logo_url }}</a></td>
            <td><a target="_blank" href="{{ app.app_url }}">{{ app.app_url }}</a></td>
            <td><div>{{ app.describe }}</div></td> {#加个div来控制容器高度,其他地方方法一致#}
            <td>{{ app.create_time }}</td>
            <td>操作</td>
        </tr>
        {% endfor %}
        </tbody>
    </table>


分享至 : QQ空间
收藏
您需要登录后才可以回帖 登录 | 立即注册