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

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显示效果相同

推荐阅读

hover
自己用过的一些比较有用的css3新属性【HTML】

web前端|html教程自己用过的一些比较用的css3新属性web前端-html教程css3刚推出不久，虽然大多数的css3属性在很多流行的浏览器中不支持，但我个人觉得还是要尽量开 ... [详细]

蜡笔小新 2024-12-24 19:26:54
html
解析：IE 浏览器中 IMG 元素 alt 属性的误用及其正确处理方式

在跨浏览器开发中，一个常见的问题是关于如何在鼠标悬停时显示图片提示信息。本文深入探讨了 IE 浏览器对 IMG 元素 alt 属性的特殊处理，并提供了最佳实践建议。 ... [详细]

蜡笔小新 2024-12-23 12:35:10
html
CSS选择器与XPath在Selenium中的元素定位对比

本文详细比较了CSS选择器和XPath在Selenium中通过页面结构定位元素的优劣，并提供了具体的代码示例，帮助读者理解两者在不同场景下的适用性。 ... [详细]

蜡笔小新 2024-12-21 08:56:18
html
HTML5与JavaScript实现本地文件读取、写入及路径获取

本文探讨了如何利用HTML5和JavaScript在浏览器中进行本地文件的读取和写入操作，并介绍了获取本地文件路径的方法。HTML5提供了一系列API，使得这些操作变得更加简便和安全。 ... [详细]

蜡笔小新 2024-12-20 18:36:06
hover
一个登陆界面

预览截图html部分123456789101112用户登入1314邮箱名称邮箱为空15密码密码为空16登 ... [详细]

蜡笔小新 2024-12-20 09:57:07
chrome
JavaScript中style、currentStyle、getComputedStyle及getBoundingClientRect的使用与区别

本文详细探讨了JavaScript中四种获取CSS样式的不同方法：style、currentStyle、getComputedStyle和getBoundingClientRect。每种方法的适用场景及其兼容性问题，并提供了解决方案。 ... [详细]

蜡笔小新 2024-12-18 19:27:53
view
Selenium与Python结合实现网页滚动条的自动化控制

本文介绍了如何利用Selenium和Python通过执行JavaScript代码来控制网页中的滚动条，包括垂直和水平滚动条的控制，以及特定元素的聚焦技术。 ... [详细]

蜡笔小新 2024-12-14 14:25:02
html
利用CSS3和React实现数字滚动动画组件

在前端开发中，数字滚动动画是一个常见的需求。本文将详细介绍如何使用CSS3和React构建一个数字滚动动画组件，包括组件的代码实现和样式设计。如果您对HTML版本感兴趣，欢迎留言获取。 ... [详细]

蜡笔小新 2024-12-13 13:48:05
chrome
网页中正确显示英语音标的方法与实例

在开发教育类网站时，经常遇到的一个问题是如何在网页上正确显示英语音标，以及为何某些情况下音标会显示为乱码。本文将探讨这些问题的成因及解决方案。 ... [详细]

蜡笔小新 2024-12-10 16:31:28
chrome
Scroll Event Fails to Retrieve Mouse Coordinates

Exploring the issue where the onScroll event does not correctly capture clientX and clientY values across different browsers. ... [详细]

蜡笔小新 2024-12-10 10:44:30
layout
Android LED 数字字体的应用与实现

本文介绍了一种适用于 Android 应用的 LED 数字字体（digital font），并详细描述了其在 UI 设计中的应用场景及其实现方法。这种字体常用于视频、广告倒计时等场景，能够增强视觉效果。 ... [详细]

蜡笔小新 2024-12-27 10:34:22
layout
深入解析 Android IPC 中的 Messenger 机制

本文详细介绍了 Android 中基于消息传递的进程间通信（IPC）机制——Messenger。通过实例和源码分析，帮助开发者更好地理解和使用这一高效的通信工具。 ... [详细]

蜡笔小新 2024-12-21 11:11:40
hover
Android WebView自适应布局与优化

本文详细介绍了如何在Android 4.4及以上版本中配置WebView以实现内容的自动高度调整和屏幕适配，确保中文显示正常，并提供代码示例。 ... [详细]

蜡笔小新 2024-12-21 10:05:50
layout
ListView简单使用

先上效果：主要实现了Listview的绑定和点击事件。项目资源结构如下：先创建一个动物类，用来装载数据：Animal类如下：packagecom.example.simplelis ... [详细]

蜡笔小新 2024-12-20 18:17:25
layout
深入解析 Android 值动画实现细节

本文详细介绍了如何在 Android 中使用值动画（ValueAnimator）来动态调整 ImageView 的高度，并探讨了相关的关键属性和方法，包括图片填充后的高度、原始图片高度、动画变化因子以及布局重置等。 ... [详细]

蜡笔小新 2024-12-20 17:58:54

28划生12_928

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

Tags | 热门标签

RankList | 热门文章