您的位置：首页 > Web前端 > CSS

table内文字一行内显示

2016-03-10 17:05 435 查看
/*样式*/

table{display:fixed;width:100%;}

注意table要有宽度属性

针对要一行显示的文字添加样式类inlinetxt

inlinetxt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        *{padding:0;margin:0;border:0;}

        table {border-collapse:collapse;border-spacing:0;}

        .content{width:1000px;margin:0 auto;}

        .content table,.content table td{border:1px solid #ddd;}

        .content table{table-layout:fixed;width:100%;}

        .inlinetxt{overflow:hidden;text-overflow:ellipsis;white-space: nowrap;}

    </style>

</head>

<body>

    <div class="content">

        <table>

            <tbody>

                <tr>

                    <td class="inlinetxt">测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字</td>

                    <td>测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字</td>

                    <td>测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字</td>

                    <td>测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字</td>

                    <td>测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字</td>

                </tr>

            </tbody>

        </table>

    </div>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  CSStable class
相关文章推荐
新的分享
章节导航