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

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

推荐阅读

firefox
Selenium与Python结合实现网页滚动条的自动化控制

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

蜡笔小新 2024-12-02 17:00:28
firefox
利用自定义协议在IE中启动Firefox

随着各大机构逐步统一浏览器标准，不同浏览器间的转换需求日益突出。本文探讨了一种通过自定义浏览器协议，在现有系统中实现从一个浏览器无缝跳转至另一浏览器的方法。 ... [详细]

蜡笔小新 2024-12-02 15:41:35
css
CSS3 鼠标样式详解：cursor: not-allowed 禁止手势

本文详细介绍了 CSS3 中的 `cursor: not-allowed` 属性，该属性用于在用户无法执行特定操作时显示一个禁止手势。此外，还探讨了如何通过结合 `pointer-events: auto!important;` 来增强用户体验。 ... [详细]

蜡笔小新 2024-12-01 19:34:25
layout
Android开发技巧：实现带描边的圆角图片

本文介绍了一种在Android应用中实现带描边的圆角图片的方法。通过使用BitmapShader类，开发者可以轻松地为图片添加圆角和描边效果，提升应用的视觉体验。 ... [详细]

蜡笔小新 2024-12-13 13:19:00
button
Android硬件加速功能详解及应用

从Android 3.0 (API Level 11)起，Android的2D渲染管道得到了改进，以更好地支持硬件加速。本文介绍了如何启用和管理硬件加速，以及其对应用性能的影响。 ... [详细]

蜡笔小新 2024-12-13 11:28:44
button
Android Studio 中 Activity 组件详解

本文介绍了 Android 开发中 Activity 的基本概念、生命周期、状态转换以及如何创建和管理 Activity。通过详细的解释和示例代码，帮助开发者更好地理解和使用 Activity。 ... [详细]

蜡笔小新 2024-12-13 10:46:05
css
深入理解Android NinePatch图片在聊天界面的应用

本文探讨了在开发Android应用，特别是聊天界面时，如何有效利用NinePatch图片解决图片拉伸问题。文章通过实例展示了不使用与使用NinePatch图片的区别，并详细介绍了如何创建和使用NinePatch图片。 ... [详细]

蜡笔小新 2024-12-13 10:41:40

28划生12_928

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

Tags | 热门标签

RankList | 热门文章