程序员经验分享-hwhale

IE中的rowspan和colspan问题

2023-12-10

因此，我需要创建具有复杂的 colspan 和 rowspan 系统的表。你可以看一下here

这是HTML：

<table cellspacing="0" cellpadding="0" style="table-layout: fixed; width: 900px;">
<tr>
    <td colspan="3" rowspan="3" >
        <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/gag.jpg" style="width: 100%;" />
    </td>
    <td colspan="2" rowspan="2" >
        <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/ts2.jpg" style="width: 100%;" />
    </td>
    <td colspan="2" rowspan="3" >
        <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/gm.jpg" style="width: 100%;" />
    </td>
    <td colspan="1" rowspan="1" >
        <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/mp.jpg" style="width: 100%;" />
    </td>
    <td colspan="1" rowspan="1" >
        <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/cd.jpg" style="width: 100%;" />
    </td>
</tr>
<tr>
    <td colspan="2" rowspan="2" >
        <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/43ai.jpg" style="width: 100%;" />
    </td>
</tr>
<tr>
    <td colspan="2" rowspan="2" >
        <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/fc.jpg" style="width: 100%;" />
    </td>
</tr>
<tr>
    <td colspan="3" rowspan="2" >
        <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/diodella.jpg" style="width: 100%;" />
    </td>
    <td colspan="2" rowspan="2" >
        <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/ts1.jpg" style="width: 100%;" />
    </td>
    <td colspan="2" rowspan="1" >
        <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/kor.jpg" style="width: 100%;" />
    </td>
</tr>
<tr>
    <td colspan="2" rowspan="1" >
        <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/ic.jpg" style="width: 100%;" />
    </td>
    <td colspan="2" rowspan="1" >
        <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/enter.jpg" style="width: 100%;" />
    </td>
</tr>

即使我以像素为单位设置所有单元格的宽度和高度，它也无法在 IE 中正常工作。

您可以看到，在这个屏幕截图上它应该如何工作。

ok

现在空间小已经不重要了。我将背景设置为粉红色并添加黑色边框以便更好地理解。

如何修复 IE 中的 rowspan/colspan 系统的大空格和问题？

ie


将您的布​​局视为 9 列网格，其中内容跨越 1、2 或 3 列。然后使用浮动：

#grid {
  width: 900px;
  overflow: hidden;
}
#grid div {
  float: left;
}
#grid .col-3-9 {
  width: 33.33%;
}
#grid .col-2-9 {
  width: 22.22%;
}
#grid .col-1-2 {
  width: 50%;
}
#grid img {
  display: block;
  width: 100%;
}
<div id="grid">
  <div class="col-3-9">
    <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/gag.jpg">
    <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/diodella.jpg">
  </div>
  <div class="col-2-9">
    <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/ts2.jpg">
    <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/fc.jpg">
    <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/ic.jpg">
  </div>
  <div class="col-2-9">
    <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/gm.jpg">
    <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/ts1.jpg">
  </div>
  <div class="col-2-9">
    <div class="col-1-2">
      <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/mp.jpg">
    </div>
    <div class="col-1-2">
      <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/cd.jpg">
    </div>
    <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/43ai.jpg">
    <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/kor.jpg">
    <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/enter.jpg">
  </div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

internetexplorer

htmltable

internetexplorer11

IE中的rowspan和colspan问题 的相关文章

  • Bootstrap 导航栏与 Google 位置重叠自动完成下拉菜单

    我有一个导航栏 我试图在其中添加一个地点搜索框 除了谷歌位置提示框的一小部分被导航栏重叠 如下图所示 之外 一切几乎都有效 我尝试过改变z index输入框的值改为10或2000或90000但似乎没有效果 我还缺少其他需要做的事情吗 这是

  • 使用纯 CSS 创建向上和向下箭头图标或按钮

    我正在尝试使用纯 CSS 且无背景图像创建如下所示的 向上和向下 控制按钮 但是当我在 中添加箭头的CSS时li className after or li className before 主盒子的位置移动了 这是我遇到的问题的小提琴 g

  • 将图像编码为base64有什么效果？

    如果我将图像 jpg 或 png 转换为 base64 那么它会更大 还是具有相同的大小 会大多少呢 是否建议在我的网站上使用 Base64 编码的图像 大约会大 37 非常粗略地说 Base64 编码的二进制数据的最终大小等于原始数据大小

  • 从字体到跨度（大小和颜色）和背面的正则表达式（VB.NET）

    我正在寻找一个正则表达式 可以将我的字体标签 仅具有大小和颜色属性 转换为具有相关内联CSS的span标签 如果有帮助的话 这将在 VB NET 中完成 我还需要一个正则表达式来实现相反的效果 下面详细说明的是我正在寻找的转换示例 font

  • Gmail 无法在电子邮件上正确呈现字体

    我已经建立了一个 html 电子邮件并使用了 Google 字体 我已使用以下方法将字体包含在 head 标签中 if mso endif 并使用字体 即我这样做了

  • 在流体设计中将元素的宽度调整为其高度的百分比，反之亦然？ [复制]

    这个问题在这里已经有答案了 我正在制作响应式设计 无论屏幕尺寸是什么 它都必须保持其元素的比例 高度与宽度 所以我不知道任何元素的像素大小 并且我只能以 工作 我可以将宽度或高度设置为浏览器大小的百分比 但我不知道如何设置其他属性值 仅使用

  • Twitter bootstrap 3表单水平和单行多个输入列

    我需要将多列输入放在单行中 如下所示 我通过将多个输入分组为一个来做到这一点form group 但是这样我不能使用has error class div class form group div

  • 如何设置 CSS 网格的最大高度

    我有以下 CSS 网格 grid 3x4 display grid grid template columns 1fr 1fr 1fr grid template rows 1fr 1fr 1fr 1fr grid template are

  • 固定宽度可变高度网格CSS

    我们如何在网格布局中实现固定宽度和可变高度 就像www pinterest com http www pinterest com主页布局 我认为他们正在使用 Javascript 只是想知道是否还有其他方法 只需使用float left不管

  • 动态表单标签宽度的 CSS

    我目前正在重构我们的表单控制器之一 以便我们可以将其用于面向公众的网站 目前它正在为表单生成表格布局 但我正在尝试使用 CSS 表单来完成它 我正在尝试重现看起来像这样的东西http www stylephreak com uploads

  • CSS：水平滚动时背景不存在

    好的 我的背景设置如下 HTML div div CONTENT HERE div div CSS container background url image gif content width 800px margin auto 因此

  • Chrome 的独立代理设置的解决方法[关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我做了一个搜索并且也在这个forum https stackoverflow com questions 19118181 why doe

  • 如何倾斜 div 并保持背景图像不倾斜

    我已经花了几个小时了 所以希望有人能提供帮助 我有一个网站 其中大部分 div 都是倾斜的 大多数 div 都包含背景图像 现在我已经让 div 倾斜了 内容完美地位于其中 唯一的问题是背景图像 它与父级一起倾斜 我用谷歌搜索了很多 但找不

  • Selenium c#：如何在特定版本中启动 Internet Explorer 驱动程序（例如 IE8）

    在 java 中 可以通过传递所需的功能来设置 Internet Explorer 驱动程序的 IE 版本 这在 C 中不起作用 我希望它看起来像这样 DesiredCapabilities ieCapabilities null ieCa

  • 为什么需要重置浏览器？

    好吧 我知道这可能不是最好的标题why我们需要重置浏览器 因为浏览器有不同的默认设置 我的问题太长 无法放入标题中 如果每个人 90 的时间都需要使用重置样式表 为什么浏览器需要设置默认样式 无论如何我们都会删除它们 对吗 因为某些规则默认

  • 按百分比设置 bootstrap 模态身高

    我正在尝试制作一个带有主体的模态 当内容变得太大时 该主体会滚动 但是 我希望模式能够响应屏幕尺寸 当我将最大高度设置为 40 时 它没有任何效果 但是 如果我将最大高度设置为 400px 它会按预期工作 但不会响应 我确信我只是错过了一些

  • 如何更改 Bootstrap 3 div 列顺序

    正在做我的第一个响应式设计 在 Bootstrap 3 中可能会出现类似的情况 在 lg 上更改此设置 a b c sm 上的这个 a c b 您可以使用两个 div 一个用于第一类型的布置 另一个用于第二类型的布置 第一个仅在 lg 中显

  • Jquery 中的动态滚动位置

    请帮助我解决以下情况 我有 3 个页面 当滚动到达第二页时 用户滚动页面 它必须找到特定的 ID 然后触发一个函数 一旦第三页开始 另一个函数就会触发 根据要求我不应该使用任何插件

  • 如何将送货地址复制到帐单地址

    我想知道是否可以将送货地址复制到帐单地址 当用户单击与送货地址相同的复选框时 送货地址值将被复制到账单输入字段 我完成了大部分部分 但我不确定如何将选择菜单 状态 值复制到帐单地址 我真的很感谢任何帮助 My code document r

  • 我可以停止 :hover 应用于元素吗？

    假设我有一些 CSS button hover font weight bold 我怎样才能防止 hover随意应用样式 我的目标用例是当元素被禁用时 例如 使用这个 HTML

随机推荐

  • 在 python 中动态生成变量名称[重复]

    这个问题在这里已经有答案了 有没有办法可以在 python 中循环生成变量名并为其赋值 例如 如果我有 prices 5 12 45 I want price1 5 price2 12 price3 45 我可以在循环或其他方式中执行此操作

  • 如何在没有窗口的情况下将图像直接传输到屏幕？

    如何显示 PNG BITMAP JPEG 文件等中的图像 在没有窗口的屏幕上 我希望图像出现时周围没有框架 最好不要将其作为窗口注册在任务栏上 我想将这些图像快速连续地显示在屏幕上 如果它与 Windows XP 和 Windows 7 兼

  • jQuery 属性名称包含

    我正在尝试定位包含某个单词的属性名称 而不是以您所想的方式 可以说我有 div div 我如何定位具有 data foo 在属性名称中 我认为您不能像定位属性值一样定位属性名称 但是 您可以使用 filter 有效地做到这一点 div fi

  • 选择一系列嵌套元素的每隔一个元素（每个元素只有一个子元素）[重复]

    这个问题在这里已经有答案了 是否存在每秒定位一次的 css 选择器 letter 当然 我可以把所有 letter位于同一级别并使用的元素 nth child 2n 但它们都取决于前一个字母的位置 所以我需要嵌套 firstname pos

  • 填充前一列中的空白单元格 pandas python

    如果我有一个简单的数据框 例如 q 1 q 1 mark q 2 q 2 mark TRUE a 1 c FALSE b 2 TRUE c 3 如何填写 q 2 mark 列的空白值 以便它们与 q 1 mark 匹配 所以步骤是 查看该列

  • UWP 的“Add-DevAppPackage”Powershell 脚本检查开发人员许可证。这是侧面加载的问题吗？

    我正在开发一个 LOB 业务线 UWP 项目 我们希望将该应用程序作为 appxbundle文件 旁边是 cer和一个 Powershell 脚本 这是当您通过选择从 Visual Studio 生成捆绑包时在包中生成的内容Project

  • VS Code 终端打开，然后崩溃并在按终止按钮后消失

    在 VS Code 中单击 终止终端 后出现此错误 无法解析您的 shell 环境 生成的 shell 出现意外的退出代码 代码为 null 信号 SIGSEGV 现在 当我单击 终端 新终端 时 我的 VSCode 会执行此操作 它打开窗

  • CUDA 流销毁和 CudaDeviceReset

    我已经使用 CUDA 流实现了以下类 class CudaStreams private int nStreams cudaStream t streams cudaStream t active stream public default

  • 获取范围相对于其父容器的开始和结束偏移量

    假设我有这个 HTML 元素 div Hello everyone a This is my home page a p Bye p div 用户用鼠标选择 home 我希望能够确定有多少个字符 parent他的选择开始 以及从末尾开始有多

  • 重命名 JSON 中的属性

    你好 这是我的 json name test options Repartition Active Satellite No 我想用 s 重命名 卫星 中的 卫星 但我没有成功 我试过 UPDATE Liaison set content

  • 如何在将 html 写入 PDF 时应用样式

    我正在将 html 添加到 pdf 文件中 我的 html 是 div 形式 并且包含 style 属性 其样式如下border 2px solid red 但这种风格不适用于我正在写入 pdf 文件的 html 我正在使用以下代码 Doc

  • Cocoa 脚本：从“重复”命令返回克隆对象

    AppleScriptduplicate命令应该返回复制的对象 虽然使用基于 AE 的原始函数的应用程序似乎可以做到这一点 但基于 Cocoa 脚本框架的应用程序似乎永远不会返回任何内容 但缺失值 看来命令处理程序NSCloneComman

  • 是否有规范规定元素的 id 应该设为全局变量？

    如果我有一个 div 在 Chrome 中然后在 javascript 中我可以做a stuff 就好像a是一个全局变量 然而 这不适用于 FireFox 我需要使用document getElementById a 是什么正确的行为这里

  • 使用计时器更新列表 UI

    我正在尝试更新ListView with timer 我已经实现了 android UI 计时器 但我的问题是如何使用它ListView我需要在一定时间间隔后更新列表的每一行 处理程序如何更新列表的每一行 即假设TextView位于我将显示

  • 选择另一个受密码保护的数据库中的表？

    在 Microsoft Access 2003 和 Visual Basic 6 中 我尝试将表复制到另一个受密码保护的访问数据库 如下所示 Select INTO table2 IN database2 mdb Password Test

  • 在SSRS报告中显示条形码

    我正在尝试在 SSRS 报告中显示条形码 我在 Visual Studio 中的条形码报告中创建了一个字段 并将字体类型更改为 BC C39 3 到 1 Wide 格式 我用来显示的相应文本是 hellobarcode 每当我生成报告时 它

  • Clojure - 将字符串转换为整数向量的向量

    我试图解析一个文件并使用每一行来执行任意数量的函数和参数 我想调用的函数接受两个整数向量向量用于矩阵乘法 我能够将参数解析为一个向量 这样我就可以对其和解析的函数符号调用 apply 但我仍然需要将参数从字符串转换为适当的类型 我怎样才能实

  • “-(void)connection:(NSURLConnection *)connection didReceiveData:(NSData *)data”未调用

    看看这个代码片段 void connection NSURLConnection connection didReceiveResponse NSURLResponse response webData setLength 0 void c

  • 删除 websphere 中的 cookie - 如何注销

    我正在使用另一个网页 该网页通过 URL 将用户身份验证 AD 登录 传递到 WebSphere 当我注销时 我将重定向到登录页面 并且已经登录 因为我的会话从未关闭 我尝试了一些方法来禁用 WebSphere 的 cookie 但没有任何

  • IE中的rowspan和colspan问题

    因此 我需要创建具有复杂的 colspan 和 rowspan 系统的表 你可以看一下here 这是HTML table cellspacing 0 cellpadding 0 style width 100 tr td img src h

热门标签