table-layout:fixed;

作者: 索隆萨克 | 来源:发表于2018-12-14 09:10 被阅读3次

属性均分表格列宽度，也可设定宽度，设定后剩下的依旧均分剩余宽度

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    * {
        padding: 0;
        margin: 0;
        font-size: 12px;
        color: #333
    }

    li {
        list-style: none;
    }

    table {
        border: 2px solid #ccc;
        width: 100%;
        text-align: center;
        border-collapse: collapse;
        table-layout: fixed;
    }

    td,
    th {
        height: 30px;
        border: 2px solid #ccc;
        word-break: break-all;
    }

    .ellipsis {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    </style>
</head>

<body>
    <table width="400" border="1" id="table1">
        <tr>
            <td>3</td>
            <td class="ellipsis" width="10%">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td width="40%">5</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
    </table>
</body>

</html>