css防止表格太大撑开

表格 撑开 css 防止 太大 border break 考虑 table 编程技术
发布日期 2022-10-24 更新日期 2022-10-24 阅读次数 58 文章字数 381

正常情况下排版都会考虑排版内容是否会撑开。但是有一些情况是特别的无法事先考虑，比如 html 编辑器复制粘贴

解决办法，直接给 table 添加 max-width : 100%;

此外，还可以考虑  td 换行问题，对表格稍微美化等等，例如以下样式

table {
    display: table;
    max-width: 100%;
    border: 1px solid #e6e6e6;
    border-collapse: collapse;
    border-spacing: 1px;
}

th,
td {
    border: 1px solid #e6e6e6;
    padding: 8px 16px;
    text-align: left;
    word-break: break-all;
}

th {
    background-color: #eff3f5;

}

table tr td {
    word-break: break-all;
}

tr:nth-child(odd) {
    background-color: #f5f6f7;
}

文章作者: 朱丰华

文章链接: https://smart.52dixiaowo.com/blog/post-154.html

版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。

表格 撑开 css 防止 太大 border break 考虑 table

发表评论

相关推荐
朱丰华   |   1年前   |   < · iframe

让iframe嵌入的视频自适应 （100%宽度）？

142    评论    点赞
朱丰华   |   1年前   |   文件 · c语言 · include

C语言include语法，h文件和c文件的关系

111    评论    点赞
朱丰华   |   1年前   |   html

一行代码实现html网页整体缩放

190    评论    点赞
朱丰华   |   2年前   |   css · 滚动

css控制内容溢出时横向滚动条

96    评论    点赞
朱丰华   |   2年前   |   table · layout · 属性 · 表格 · 布局 · 单元 · CSS · 宽度 · 内容 · 自动

CSS table-layout 属性

81    评论    点赞
朱丰华   |   2年前   |   inline · block · css · 区别 · 独占 · 一行 · margin · padding · line

css 之 inline 和 inline-block的区别

85    评论    点赞
朱丰华   |   2年前   |   居中 · 高度 · li · 垂直 · 基线 · css · 高等 · 容器 · 可以 · 行高

让 li 的 a 居中，css行高等于容器高度可以垂直居中

73    评论    点赞
朱丰华   |   2年前   |   样式 · 用户 · 代理 · css · 填坑 · 浏览器

css填坑，用户代理样式表

197    评论    点赞
朱丰华   |   2年前   |   flex · direction · CSS · 属性 · 横向 · 竖向 · 布局 · row · column · reverse

CSS flex之flex-direction横向、竖向布局

133    评论    点赞
朱丰华   |   2年前   |   css · 顶端 · 对齐

css 顶端对齐

54    评论    点赞
朱丰华   |   2年前   |   图片 · 移动 · 端下 · 太大 · 怎么 · 自动 · 适应 · 大小

移动端下图片太大了？怎么自动适应大小

81    评论    点赞
{{item.author_name}}   |   {{new Date(item.date*1000).log()}}   |   {{it}} ·

{{item.title}}

{{item.uv}}    评论    点赞