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

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

推荐阅读

chrome
CSS选择器与XPath在Selenium中的元素定位对比

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

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

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

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

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

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

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

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

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

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

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

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

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

蜡笔小新 2024-12-10 16:31:28
overflow
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
chrome
解决HTML5 WebSocket频繁断开连接的问题

本文探讨了在使用HTML5 WebSocket技术构建浏览器内聊天室时遇到的连接不稳定问题，并提供了可能的解决方案和调试方法。 ... [详细]

蜡笔小新 2024-12-07 17:07:00
chrome
深入理解动画队列

动画队列的设计目的是为了确保一系列任务能够按照预定顺序执行，每个任务只有在其前一个任务完成后才开始。这些任务既可以是同步的，也可以是异步的。本文将探讨jQuery动画系统中的队列机制，并介绍如何使用队列来优化动画效果。 ... [详细]

蜡笔小新 2024-12-07 10:26:02
chrome
深入学习Shiro：并发登录人数限制实现

本文详细介绍了如何在Apache Shiro框架中实现对并发登录人数的限制，包括配置和自定义过滤器的具体步骤。 ... [详细]

蜡笔小新 2024-12-06 17:14:41
json
Flask与JavaScript实现前后端JSON数据交互

本文基于作者使用Flask框架处理后端逻辑和原生JavaScript及jQuery进行前端开发的经验，详细介绍了如何在前后端之间高效地传输JSON数据。文章不仅涵盖了技术实现细节，还提供了实用的代码示例。 ... [详细]

蜡笔小新 2024-12-05 18:28:52
json
SonarQube配置与使用指南

本文档详细介绍了SonarQube的配置方法及使用流程，包括环境准备、样本分析、数据库配置、项目属性文件解析以及插件安装等内容，适用于具有Linux基础操作能力的用户。 ... [详细]

蜡笔小新 2024-12-02 17:00:28
js
RecyclerView初步学习(一)

RecyclerView初步学习(一)ReCyclerView提供了一种插件式的编程模式，除了提供ViewHolder缓存模式，还可以自定义动画，分割符，布局样式，相比于传统的ListVi ... [详细]

蜡笔小新 2024-12-26 20:24:01
js
强制WebView重新绘制或渲染页面

本文探讨了如何在不重新加载URL的情况下，触发WebView的PictureListener.onNewPicture()方法，以实现页面的重新绘制或渲染。 ... [详细]

蜡笔小新 2024-12-26 16:59:49

28划生12_928

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

Tags | 热门标签

RankList | 热门文章