【HTML】table 1px border，td文本超出隐藏

最新推荐文章于 2024-05-15 17:31:09 发布

新生代农民工官方认证码农小拽

最新推荐文章于 2024-05-15 17:31:09 发布

阅读量975

点赞数 2

分类专栏： react 文章标签： react table border overflow

本文链接：https://blog.csdn.net/tuzi007a/article/details/131473842

版权

react 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

效果图
在这里插入图片描述
html代码

<table className={styles.conver_table} border={1}>
    <thead>
        <tr>
            <th>序号</th>
            <th>标题</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        {
            new Array(20).fill({}).map((v, i) => {
                return <tr key={i}>
                    <td>{i + 1}</td>
                    <td>
                        <span className={styles.title_content}>在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份</span>
                    </td>
                    <td>
                        <span className={styles.cloud_btn}>同步云端</span>
                    </td>
                </tr>
            })
        }
    </tbody>
</table>

css代码

.conver_table {
    width: 100%;
    border: 1px solid var(--border-primary);
    // 1px border关键属性
    border-collapse:collapse;
    // td内容超出隐藏的关键属性
    table-layout: fixed;

    tr {
        font-size: 1.4rem;

        th, td {
            font-family: var(--font-1);

            &:nth-child(1) {
                width: 6rem;
            }
            &:nth-last-child(1) {
                width: 10rem;
            }
        }

        th {
            height: 3rem;
            font-size: 1.8rem;
            font-weight: 500;
        }

        td {
            height: 2.4rem;
            text-align: center;

            span {
                display: inline-block;

                &.title_content {
                    width: 100%;
                    box-sizing: border-box;
                    padding: 0 0.5rem;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                &.cloud_btn {
                    color: var(--red-light);
                    font-size: 1.2rem;
                    font-weight: 600;
                    cursor: pointer;
                }
            }
        }
    }
}