程序员经验分享-hwhale

将桌子分成两半

2024-01-20

无论如何，是否可以使用 CSS 将表格分成两半并并排显示两个部分。

例如，采取这个：

| row1 | row1 | row1 |
| row2 | row2 | row2 |
| row3 | row3 | row3 |
| row4 | row4 | row4 |
| row5 | row5 | row5 |

并做这个：

| row1 | row1 | row1 |    | row4 | row4 | row4 |
| row2 | row2 | row2 |    | row5 | row5 | row5 |
| row3 | row3 | row3 |

我可以更改 HTML 标记（例如使用自定义类标记“中断”行），但我必须能够决定是否通过 CSS 拆分表格。

我知道我可以使用两个表并使用display:inline-table，但我必须只使用一张表，因为我需要一致的列宽（表必须具有自动布局）。


您可以使用多列，但它是 CSS3 属性。例如：

-moz-column-count: 2;
-moz-column-gap: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 20px;
column-count: 2;
column-gap: 20px;

这应该适用于现代浏览器

你也可以尝试这个方法

http://www.csscripting.com/css-multi-column/ http://www.csscripting.com/css-multi-column/

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

csstables

将桌子分成两半 的相关文章

  • jQuery mobile 中的文本区域高度和宽度？

    我修复了 jQuery mobile 中文本区域元素的高度 并且在纵向中得到了完美的高度和宽度 但在横向中宽度没有放大 谁能帮我 提前致谢 HTML

  • 在 Angular html 模板中访问常量枚举

    假设我有一个常量枚举 export const enum MyConstEnum Value1 Value1 Value2 Value2 Value3 Value3 现在我想在我的 Angular 模板中使用它 span This has

  • 网站在 iPhone 屏幕右侧显示空白区域

    我遇到问题http eiglaw com http eiglaw com iPhone 屏幕右侧显示约 25 像素宽的空白 边框 我在 stackoverflow 上研究了这个问题 这些帖子是相关的 但是当我尝试提供的各种解决方案时 我无法

  • VueJS 中数据无法正确显示

    我的 VueJS 代码有一个小问题 在 输出 压缩的 GS1 数字链接 URI 部分中 When there is no result it should have nothing display like this I have remo

  • 删除 IE9 边缘周围的 2px 灰色边框

    我正在尝试对这个网站进行编码 尝试关键字 并且我正在尝试找出如何删除这个阴影2px灰色边框延伸到 IE9 窗口的内部 至少顶部 左侧和底部 我的边距设置为零 因此所有页面元素都到达页面的最边缘 但使用 IE9 它们会停在这个灰色边框处 我没

  • 如何使用角度材料在具有可扩展行的表格中创建嵌套垫表

    我有以下数据 id c9d5ab1a subdomain wing domain aircraft part id c9d5ab1a info mimetype application json info dependent parent

  • 使用 JavaScript 移动页面上的按钮

    我的按钮可以移动 但奇怪的是 我无法弄清楚偏移是否有问题 我希望我的按钮随着鼠标光标移动 但现在它的移动方式不是我想要的 有时它会消失 另外 创建的新按钮是重叠的 我不知道如何解决这个问题并拥有更好的外观 var coorA var coo

  • 如何停止TinyMCE删除span标签？

    在我的工作中 前一位程序员决定使用公司网站上精彩的TinyMCE 我遇到的数千个问题之一是 如果原文有的话span标签 当我按下退格键删除一行 p仅标签 全部span标签已从文本中删除 这个错误比另一个错误更具体 我可以删除anything

  • IE 11 中的 CSS Display Flex 无法正常工作，图像会溢出

    我正在使用 CSSdisplay flex 以某种方式显示它们 在 Chrome 中 它看起来很完美 很漂亮 但在 IE 中 图像超出了我放置它们的元素 https jsfiddle net m42k7Lk5 8 https jsfiddl

  • 我可以在元标记中使用 HTML 字符实体吗？

    我有一个有两种语言的网站 英语和中文 在使用 UTF 8 字符集的英文主页中 我有 例如 这出现在搜索结果中 我想将其更改为 在哪里 20013 25991 是 中文 的 ISO 实体 搜索结果中会显示为 中文 吗 我无法将 中文 直接粘贴

  • 为什么我的列表项项目符号与浮动元素重叠

    我有一个 XHTML Strict 页面 我在其中将图像浮动在常规文本段落旁边 一切都很顺利 除非使用列表而不是段落 列表的项目符号与浮动图像重叠 更改列表或列表项的边距没有帮助 边距是从页面左侧开始计算的 但浮动会将列表项推到右侧insi

  • 先按行再按列布局 div

    我有一个容器div and 3 div里面如下 div div 1 div div 2 div div 3 div div 不知道每一个的内容div内部 但它们的高度和宽度是可变的 集装箱的高度由最高的决定div inside 我想展示这些

  • 如何消除 HTML 内容周围的边距？

    以下 HTML 显示正常 div style width 100px height 100px background red div Hello div div

  • jQuery - 如何从 div > p 获取文本

    如何从 div 类中获取主题名称 div class subject img src image eng jpg p English p div div class subject img src image bio jpg p Biolo

  • @media语法/可能的组合

    我见过其中一些 media print media screen handheld print projection media all media all and property value media screen and prope

  • 如何在更大的 div 中垂直和水平居中一个 div？

    如何将一个 水平居中于另一个 中 我设法使用已接受答案中的样式水平居中 我怎样才能让它垂直居中 内部 div 的高度未知 https stackoverflow com questions 114543 how to center div

  • 在表格上使用上下文样式将点边框应用于特定单元格

    我以前有过问了一个问题 https stackoverflow com questions 6326266 issue with applying dotted border to cells in table design在这个问题上 你

  • 使用 css 简单地将对象居中，无需修改

    我想使用 CSS 将对象居中 而不需要任何技巧 这可能吗 如何实现 我已经尝试过了 但是我的 p 标签消失了 centered position fixed top 50 left 50 有多种方法可以使元素居中 但这取决于您的元素是什么以

  • Twitter 卡元标签问题

    有问题的网址 https www halleonard com viewpressreleasedetail action releaseid 10261 https www halleonard com viewpressreleased

  • Jquery 数据表列总和

    我只是参考一下这个链接 https datatables net examples advanced init footer callback html了解如何获取 jquery 数据表中的列总计 但我已经完成了一半的项目 我在html页面

随机推荐

  • 消除 QWebChannel 属性通知器信号警告

    我在用着QWebEngineView with QWebChannel 类似于 class AppView QWebEngineView def init self QWebEngineView init self self ch QWeb

  • 使用 Intellij 指定工件名称

    我想设置使用 Intellij 构建的 jar 工件的文件名 但当我更改它时 它在输出文件中不会更改 使用 2017 2 5 我可以使用以下步骤更改工件名称 文件 gt 项目结构 在项目设置 gt 工件下 添加新的工件或修改现有的工件 在

  • hadoop 流：在 EMR 上导入模块

    上一个问题已解决 https stackoverflow com questions 6811549 how can i include a python package with hadoop streaming job 6811775

  • iOS 8 swift 社交框架

    我一直在编写一个应用程序 需要使用社交框架通过 Twitter 和 Facebook 共享文本 我让它工作 但它没有关闭 然后我想起了完成处理程序 但无论我做什么 这个处理程序都会继续给我错误 var okFacebook Bool SLC

  • 在react中读取firestore子集合数据 - 如何在子集合where查询中设置父id

    我正在尝试弄清楚如何从 React 中读取 firestore 子集合数据 我见过这个博客 https dev to rossanodan how to fetch subcollections from cloud firestore w

  • JQuery 添加隐藏的 HTML 元素

    HTML

  • GTK+ 设置字体大小

    As before https stackoverflow com questions 41072683 gtk menuitem size small 菜单项对于我的用例来说太小了 因此 我的问题是 如何增加文本 保存 加载 和 退出 的

  • 选择像素的 4 个邻居[关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 如何选择像素的 4 个邻居matla

  • 如何获取更改前的属性值？ （在 QML 中）

    我想了解以下问题 如何在声明式中存储属性的先前值 QML语言 任务是在属性值更改之前将其记住为另一个属性 问题在于现有的信号机制onPropertyNameChanged 该机制在修改后发出有关属性更改的信号 并且在这个处理程序中 不可能获

  • 如何从 java fx 应用程序打开默认系统浏览器？

    我正在尝试从 javafx 在默认系统浏览器中打开一个 web url 我没有找到任何关于此的官方文档 有什么线索吗 编辑 我发现了教程 http blog ngopal com np 2011 02 09 open default bro

  • MySQL DROP 所有表，忽略外键

    有没有一种简单的方法可以从 MySQL 数据库中删除所有表 忽略其中可能存在的任何外键约束 我发现生成的 drop 语句集很有用 并建议进行以下调整 将生成的 drop 限制到您的数据库 如下所示 SELECT concat DROP TA

  • SQL：标记哪个 WHERE 条件匹配

    这是一个理论问题 我想知道是否有一个好的方法来找出 WHERE 语句中的哪个条件匹配 假设我有一个这样的查询 SELECT FROM table WHERE COND1 OR COND2 AND COND3 OR COND4 有什么方法可以

  • pytest：如何创建专用测试目录

    我想要以下项目结构 folder tests project 我们来写一个简单的例子 test pytest tests test sum py t pytest sum py init py 总和 py def my sum a b re

  • JComboBox设置标签和值

    是否可以为a设置一个值和一个标签JComboBox所以我可以显示标签但获得不同的值 例如在 JavaScript 中我可以这样做 document getElementById myselect options 0 value access

  • 添加头文件的 CMake 构建错误 - 致命错误：找不到文件

    我在 Ubuntu 14 04 中使用 CMake 构建 C 源文件 我有一个主要源文件 这包括一个头文件 其中包含另一个源文件中的函数 我的主要源文件是 DisplayImage cpp 头文件是 Camera h 其中包含源文件 Cam

  • Javascript 在分配给其他变量时丢失上下文

    为什么在 javascript 中 如果您将对象方法引用到某个变量 它会丢失该对象上下文 找不到任何链接来解释幕后发生的事情 除了这一篇指出 this 指的是 拥有 该方法的对象 http www sitepoint com what is

  • 在 Android App Bundle 中添加 SwitchCompat 后，找不到资源错误 res/drawable/abc_switch_thumb_material.xml

    我知道这个问题已经被问过好几次了 我已经阅读了所有这些问题 并匹配了所有依赖项 以便它们具有相同的版本 但是这个错误只有在添加 Switch Compat 之后才开始发生 因为您还可以通过查看 Fabric 的崩溃报告来看到这一点 此错误并

  • 尝试启动我的应用程序时出现“没有适当的协议错误”

    我已经使用带有 SSL 证书的 nginx 代理在临时环境和生产环境中成功运行了一个 Spring Boot Web 应用程序几个月了 突然间 昨晚当应用程序尝试发送邮件消息时 当我尝试连接到邮件服务器时 我开始在生产服务器中看到错误 在尝

  • Google Sites API + OAuth2（在 Appengine 上）

    我一直在尝试利用 Python 库来访问 Google Sites API 第一步需要用户授权我们的应用程序 他们建议使用 OAuth2 并且他们提供了一个可以找到的库here http code google com p google a

  • 将桌子分成两半

    无论如何 是否可以使用 CSS 将表格分成两半并并排显示两个部分 例如 采取这个 row1 row1 row1 row2 row2 row2 row3 row3 row3 row4 row4 row4 row5 row5 row5 并做这个

热门标签