当前位置: 开发笔记 > 前端 > 正文

table设置colspan属性，列宽显示错位解决方法

作者：28划生12_928 | 来源：互联网 | 2023-06-10 19:51

<table border="1" style="width:100%;border-collapse:collapse;">
            <tr>
                <td width="100px" rowspan="3">titletd>
                <td colspan="4">name1td>
                <td colspan="23">name2td>
                <td colspan="8">name3td>
                <td colspan="8">name4td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
            tr>
            <tr>
                <td colspan="4">name1td>
                <td colspan="23">name2td>
                <td colspan="8">name3td>
                <td colspan="8">name4td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
            tr>
            <tr>
                <td colspan="2" >0td>
                <td colspan="2" >1td>
                <td colspan="2" >2td>
                <td colspan="2" >3td>
                <td colspan="2" >4td>
                <td colspan="2" >5td>
                <td colspan="2" >6td>
                <td colspan="2" >7td>
                <td colspan="2" >8td>
                <td colspan="2" >9td>
                <td colspan="2" >10td>
                <td colspan="2" >11td>
                <td colspan="2" >0td>
                <td colspan="2" >1td>
                <td colspan="2" >2td>
                <td colspan="2" >3td>
                <td colspan="2" >4td>
                <td colspan="2" >5td>
                <td colspan="2" >6td>
                <td colspan="2" >7td>
                <td colspan="2" >8td>
                <td colspan="2" >9td>
                <td colspan="2" >10td>
                <td colspan="2" >11td>
            tr>
        table>

在chrome 62中显示效果正常（name3宽度 == name4宽度），如图：

在firefox 57.2中显示异常，name4（占4格）和name3（占3.5格）列宽不一致，如图

解决方法，给table添加'table-layout=fixed'属性

<table border="1" style="table-layout:fixed;width:100%;border-collapse:collapse;">
            <tr>
                <td width="100px" rowspan="3">titletd>
                <td colspan="4">name1td>
                <td colspan="23">name2td>
                <td colspan="8">name3td>
                <td colspan="8">name4td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
            tr>
            <tr>
                <td colspan="4">name1td>
                <td colspan="23">name2td>
                <td colspan="8">name3td>
                <td colspan="8">name4td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
            tr>
            <tr>
                <td colspan="2" >0td>
                <td colspan="2" >1td>
                <td colspan="2" >2td>
                <td colspan="2" >3td>
                <td colspan="2" >4td>
                <td colspan="2" >5td>
                <td colspan="2" >6td>
                <td colspan="2" >7td>
                <td colspan="2" >8td>
                <td colspan="2" >9td>
                <td colspan="2" >10td>
                <td colspan="2" >11td>
                <td colspan="2" >0td>
                <td colspan="2" >1td>
                <td colspan="2" >2td>
                <td colspan="2" >3td>
                <td colspan="2" >4td>
                <td colspan="2" >5td>
                <td colspan="2" >6td>
                <td colspan="2" >7td>
                <td colspan="2" >8td>
                <td colspan="2" >9td>
                <td colspan="2" >10td>
                <td colspan="2" >11td>
            tr>
        table>

chrome和firefox显示效果相同

推荐阅读

css
深入理解CSS中的margin属性及其应用场景

本文主要介绍了CSS中的margin属性及其应用场景，包括垂直外边距合并、padding的使用时机、行内替换元素与费替换元素的区别、margin的基线、盒子的物理大小、显示大小、逻辑大小等知识点。通过深入理解这些概念，读者可以更好地掌握margin的用法和原理。同时，文中提供了一些相关的文档和规范供读者参考。 ... [详细]

蜡笔小新 2023-12-12 18:01:10
chrome
获取关联数组键的列表的方法及浏览器支持

本文介绍了获取关联数组键的列表的方法，即使用Object.keys()函数。同时还提到了该方法在不同浏览器的支持情况，并附上了一个代码片段供读者参考。 ... [详细]

蜡笔小新 2023-12-11 22:11:22
chrome
编写可保护的代码的重要性及优化方法

本文讨论了编写可保护的代码的重要性，包括提高代码的可读性、可调试性和直观性。同时介绍了优化代码的方法，如代码格式化、解释函数和提炼函数等。还提到了一些常见的坏代码味道，如不规范的命名、重复代码、过长的函数和参数列表等。最后，介绍了如何处理数据泥团和进行函数重构，以提高代码质量和可维护性。 ... [详细]

蜡笔小新 2023-12-11 18:32:44
chrome
macOS Big Sur全新设计大版本更新，10+个值得关注的新功能

本文介绍了Apple发布的新一代操作系统macOS Big Sur，该系统采用全新的界面设计，包括图标、应用界面、程序坞和菜单栏等方面的变化。新系统还增加了通知中心、桌面小组件、强化的Safari浏览器以及隐私保护等多项功能。文章指出，macOS Big Sur的设计与iPadOS越来越接近，结合了去年iPadOS对鼠标的完善等功能。 ... [详细]

蜡笔小新 2023-12-10 19:53:41
chrome
JavaScript简介及语言特点

本文介绍了JavaScript的起源和发展历程，以及其在前端验证和服务器端开发中的应用。同时，还介绍了ECMAScript标准、DOM对象和BOM对象的作用及特点。最后，对JavaScript作为解释型语言和编译型语言的区别进行了说明。 ... [详细]

蜡笔小新 2023-12-10 17:45:49
html
网页播放视频的三种实现方式

本文介绍了网页播放视频的三种实现方式，分别是使用html5的video标签、使用flash来播放以及使用object标签。其中，推荐使用html5的video标签来简单播放视频，但有些老的浏览器不支持html5。另外，还可以使用flash来播放视频，需要使用object标签。 ... [详细]

蜡笔小新 2023-12-10 13:24:30
css
常用的CSS属性及用法整理

本文整理了常用的CSS属性及用法，包括背景属性、边框属性、尺寸属性、可伸缩框属性、字体属性和文本属性等，方便开发者查阅和使用。 ... [详细]

蜡笔小新 2023-12-09 03:01:43
css
CSS |网格行结束属性

CSS|网格-行-结束属性原文:https://www.gee ... [详细]

蜡笔小新 2023-10-17 15:21:56
chrome
火狐Firefox ios版本二次开发 (四) 源码精简

对Firefoxios源码的精简Firefox的依赖使用carthage来进行管理，国内的网络是在过于坑爹，相关的依赖包总是无法下载下来，花了两天时间，手动将Firefox所依赖的库导入 ... [详细]

蜡笔小新 2023-10-17 14:50:00
css
css元素可拖动,如何使用CSS禁止元素拖拽？

一、用户行为三剑客以下3个CSS属性：user-select属性可以设置是否允许用户选择页面中的图文内容；user-modify属性可以设置是否允许输入 ... [详细]

蜡笔小新 2023-10-17 14:35:15
button
python – PyQt进度在启动后跳转到100％

当我在doWork方法中运行代码时,通过单击button1,进度条按预期工作.但是,当我从其他方法(即btn2,btn3)将列表传递给doWork方法时,进度条在启动后会跳转到10 ... [详细]

蜡笔小新 2023-10-17 09:31:56
chrome
2021年最详细的Android屏幕适配方案汇总

1Android屏幕适配的度量单位和相关概念建议在阅读本文章之前，可以先阅读快乐李同学写的文章《Android屏幕适配的度量单位和相关概念》，这篇文章 ... [详细]

蜡笔小新 2023-10-16 20:18:36
css
CSS背景位置y | backgroundpositiony

css,背景,位置,y,background, ... [详细]

蜡笔小新 2023-10-16 16:28:38
html
android listview OnItemClickListener失效原因

最近在做listview时发现OnItemClickListener失效的问题，经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效，还会导致单击后listview每个item的背景改变，使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况，并提供了解决方法。 ... [详细]

蜡笔小新 2023-12-14 14:25:50
button
详解Android 自定义UI模板设计_由浅入深

学习安卓已有一些日子，前段时间整理了不少笔记，但是发现笔记不变分享与携带。今天开始整理博客，全当是与大家分享交流与自身学习理解的过程吧。结合最近在做的一个新闻类app及学习中的问题，一点一点整理一下， ... [详细]

蜡笔小新 2023-10-17 18:08:39

28划生12_928

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章