如何堆叠表格列来模拟日历议程视图？

2024-01-11

我想转置 HTML 表格而不使用 JS 或使用另一个表格。

我有一张桌子，里面有一个时间表，我想在移动屏幕上折叠成单列（我需要this https://i.stack.imgur.com/4ioSh.png成为this https://i.stack.imgur.com/tQih4.png).

现在我有两个表，并且正在通过媒体查询切换显示哪个表（以及将行折叠到单元格，如所解释的那样）在本文中 https://css-tricks.com/responsive-data-tables/），但我想要一个更好的解决方案，因为每次编辑都需要更改两个表。

我可以在不使用 JavaScript 的情况下完成此操作吗？

.styled-table {
	margin: 0 auto;
	padding: 0;
	width: 100%;
}

.styled-table thead, .styled-table tbody {
	text-align: center;
}

.styled-table th {
	font-weight: normal;
	background-color: #C00;
	color: white;
}

.styled-table tr:nth-child(even) {
	background: #CCC0C0;
}

.styled-table th {
	border-top: 1px solid #C00;
	border-bottom: 1px solid #C00;
}

.styled-table th:first-child {
	border-left: 1px solid #C00;
}

.styled-table th:last-child {
	border-right: 1px solid #C00;
}

@media screen and (min-width: 769px) {
	.styled-table td + td,
												.styled-table th + th,
												.styled-table th + td {
		border-left: 1px solid black;
	}
	
	.display-sm {
		display: none;
	}
}

@media screen and (max-width: 768px) {
	
	/* Force table to not be like tables anymore */
	table.styled-table, 
												.styled-table thead, 
												.styled-table tbody, 
												.styled-table th, 
												.styled-table td, 
												.styled-table tr {
		display: block;
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	.styled-table thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	.styled-table tr {
		border-bottom: 1px solid black;
	}
	
	.styled-table td {
	/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee;
		position: relative;
		padding: 5px;
		padding-left: 50%;
	}
	
	.styled-table td:before {
		position: absolute;
		top: 0;
		left: 0;
		width: 50%;
		height: 100%;
		content: attr(data-mobile-label);
		font-weight: normal;
		font-style: normal;
		background-color: #C00;
		color: white;
		border-right: 1px solid black;
	}
	
	.styled-table th {
		border-bottom: 1px solid black;
	}
	
	.hide-sm {
		display: none !important;
	}
}

<table class="styled-table hide-sm">
  <thead>
    <tr>
      <th>Time/Day</th>
      <th>Mon</th>
      <th>Tues</th>
      <th>Wed</th>
      <th>Thurs</th>
      <th>Fri</th>
      <th>Sat</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>
        8:45 AM
        to
        1:00 PM
      </th>
      <td>
      	Name <br>
      	Name <br>
      	Name <br>
      </td>
      <td>
      	Name <br>
      	Name <br>
      	Name <br>
      </td>
      <td>
      	Name <br>
      	Name <br>
      	Name <br>
      </td>
      <td>
      	Name <br>
      	Name <br>
      	Name <br>
      </td>
      <td>
      	Name <br>
      	Name <br>
      	Name <br>
      </td>
      <td>
      	Name <br>
      	Name <br>
      	Name <br>
      </td>
    </tr>
    <tr>
      <th>
        1:00 PM
        to
        5:00 PM
      </th>
      <td>
      	Name <br>
      	Name <br>
      	Name <br>
      </td>
      <td>
      	Name <br>
      	Name <br>
      	Name <br>
      </td>
      <td>
      	Name <br>
      	Name <br>
      	Name <br>
      </td>
      <td>
      	Name <br>
      	Name <br>
      	Name <br>
      </td>
      <td>
      	Name <br>
      	Name <br>
      	Name <br>
      </td>
      <td>
      	Name <br>
      	Name <br>
      	Name <br>
      </td>
    </tr>
    <tr>
      <th>
        5:00 PM
        to
        9:00 PM
      </th>
      <td>
      	Name <br>
      	Name <br>
      	Name <br>
      </td>
      <td>
      	Name <br>
      	Name <br>
      	Name <br>
      </td>
      <td>
      	Name <br>
      	Name <br>
      	Name <br>
      </td>
      <td>
      	Name <br>
      	Name <br>
      	Name <br>
      </td>
      <td>
      	Name <br>
      	Name <br>
      	Name <br>
      </td>
      <td>
      	Name <br>
      	Name <br>
      	Name <br>
      </td>
    </tr>
  </tbody>
</table>
<table class="styled-table display-sm">
  <thead>
    <tr>
      <th>Time/Day</th>
      <th>Mon</th>
      <th>Tues</th>
      <th>Wed</th>
      <th>Thurs</th>
      <th>Fri</th>
      <th>Sat</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Mon</th>
      <td data-mobile-label="8:45 AM to 1:00 PM">
      	Name <br>
      	Name <br>
      	Name <br>
      </td>
      <td data-mobile-label="1:00 PM to 5:00 PM">
      	Name <br>
      	Name <br>
      	Name <br>
      </td>
      <td data-mobile-label="5:00 PM to 9:00 PM">
      	Name <br>
      	Name <br>
      	Name <br>
      </td>
    </tr>
    <tr>
      <th>Tues</th>
      <td data-mobile-label="8:45 AM to 1:00 PM">
      	Name <br>
      	Name <br>
      	Name <br>
      </td>
      <td data-mobile-label="1:00 PM to 5:00 PM">
      	Name <br>
      	Name <br>
      	Name <br>
      </td>
      <td data-mobile-label="5:00 PM to 9:00 PM">
      	Name <br>
      	Name <br>
      	Name <br>
      </td>
    </tr>
    <tr>
      <th>Wed</th>
      <td data-mobile-label="8:45 AM to 1:00 PM">
      	Name <br>
      	Name <br>
      	Name <br>
      </td>
      <td data-mobile-label="1:00 PM to 5:00 PM">
      	Name <br>
      	Name <br>
      	Name <br>
      </td>
      <td data-mobile-label="5:00 PM to 9:00 PM">
      	Name <br>
      	Name <br>
      	Name <br>
      </td>
    </tr>
    <tr>
      <th>Thurs</th>
      <td data-mobile-label="8:45 AM to 1:00 PM">
      	Name <br>
      	Name <br>
      	Name <br>
      </td>
      <td data-mobile-label="1:00 PM to 5:00 PM">
      	Name <br>
      	Name <br>
      	Name <br>
      </td>
      <td data-mobile-label="5:00 PM to 9:00 PM">
      	Name <br>
      	Name <br>
      	Name <br>
      </td>
    </tr>
    <tr>
      <th>Fri</th>
      <td data-mobile-label="8:45 AM to 1:00 PM">
      	Name <br>
      	Name <br>
      	Name <br>
      </td>
      <td data-mobile-label="1:00 PM to 5:00 PM">
      	Name <br>
      	Name <br>
      	Name <br>
      </td>
      <td data-mobile-label="5:00 PM to 9:00 PM">
      	Name <br>
      	Name <br>
      	Name <br>
      </td>
    </tr>
    <tr>
      <th>Sat</th>
      <td data-mobile-label="8:45 AM to 1:00 PM">
      	Name <br>
      	Name <br>
      	Name <br>
      </td>
      <td data-mobile-label="1:00 PM to 5:00 PM">
      	Name <br>
      	Name <br>
      	Name <br>
      </td>
      <td data-mobile-label="5:00 PM to 9:00 PM">
      	Name <br>
      	Name <br>
      	Name <br>
      </td>
    </tr>
  </tbody>
</table>

您可以使用display:grid and display:contents （因为这对你来说不是问题）重构 HTML 表格的视觉布局。 Adata-attribute还需要创建缺失的单元格。

example

table {
  width: 100%;
  border-collapse: collapse;
  background:rgb(196, 215, 70)
}

th,
:before {
  background: tomato;
  box-shadow: inset 0 0 0 2px;
}

th,
td {
  box-shadow: inset 0 0 0 2px;
  text-align: center;
  vertical-align: middle;
  padding: 0.5em;
}

tr:nth-child(2n) {
  background: lightblue;
}

@supports (display: contents) {
  /* trick works if data-time attributes stands in html and if display:contents is supported */
  @media screen and (max-width: 768px) {
    table {
      display: flex;
      flex-flow: column;
    }
    thead,
    tr,
    tbody {
      display: contents;
    }
    tr th:first-child {
      display: none;
    }
    th {
      background: red;
    }
    td {
      display: table;
      /*  you may also use display : flex; */
      table-layout: fixed;
      border-collapse: collapse;
      width: 100%;
    }
    td:before {
      content: attr(data-time);
      border-right: solid 1px;
      display: table-cell;
      /* no need if td is a flex box */
      white-space: pre;
      /* only if you care */
      vertical-align:middle;
      padding: 0.25em;
    }
    /* flex or grid allows to reorder content, exactly what we need and will do */
    tr :nth-child(2) {
      order: 0;
    }
    tr :nth-child(3) {
      order: 1;
    }
    tr :nth-child(4) {
      order: 2;
    }
    tr :nth-child(5) {
      order: 3;
    }
    tr :nth-child(6) {
      order: 4;
    }
    tr :nth-child(7) {
      order: 5;
    }
    td:nth-child(2n +1) {
      background: lightblue;
    }
  }
}

<table>
  <thead>
    <tr>
      <th>Time/Day</th>
      <th>Mon</th>
      <th>Tues</th>
      <th>Wed</th>
      <th>Thurs</th>
      <th>Fri</th>
      <th>Sat</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>
        8:45 AM to 1:00 PM
      </th>
      <td data-time="8:45 AM
to
1:00 PM">
        <p>Name </p>
        <p>Name </p>
        <p>Name </p>
      </td>
      <td data-time="8:45 AM
to
1:00 PM">
        <p>Name </p>
        <p>Name </p>
        <p>Name </p>
      </td>
      <td data-time="8:45 AM
to
1:00 PM">
        <p>Name </p>
        <p>Name </p>
        <p>Name </p>
      </td>
      <td data-time="8:45 AM
to
1:00 PM">
        <p>Name </p>
        <p>Name </p>
        <p>Name </p>
      </td>
      <td data-time="8:45 AM
to
1:00 PM">
        <p>Name </p>
        <p>Name </p>
        <p>Name </p>
      </td>
      <td data-time="8:45 AM
to
1:00 PM">
        <p>Name </p>
        <p>Name </p>
        <p>Name </p>
      </td>
    </tr>
    <tr>
      <th>
        1:00 PM to 5:00 PM
      </th>
      <td data-time="1:00 PM
to
5:00 PM">
        <p>Name </p>
        <p>Name </p>
        <p>Name </p>
      </td>
      <td data-time="1:00 PM
to
5:00 PM">
        <p>Name </p>
        <p>Name </p>
        <p>Name </p>
      </td>
      <td data-time="1:00 PM
to
5:00 PM">
        <p>Name </p>
        <p>Name </p>
        <p>Name </p>
      </td>
      <td data-time="1:00 PM
to
5:00 PM">
        <p>Name </p>
        <p>Name </p>
        <p>Name </p>
      </td>
      <td data-time="1:00 PM
to
5:00 PM">
        <p>Name </p>
        <p>Name </p>
        <p>Name </p>
      </td>
      <td data-time="1:00 PM
to
5:00 PM">
        <p>Name </p>
        <p>Name </p>
        <p>Name </p>
      </td>
    </tr>
    <tr>
      <th>
        5:00 PM to 9:00 PM
      </th>
      <td data-time="5:00 PM
to
9:00 PM">
        <p>Name </p>
        <p>Name </p>
        <p>Name </p>
      </td>
      <td data-time="5:00 PM
to
9:00 PM">
        <p>Name </p>
        <p>Name </p>
        <p>Name </p>
      </td>
      <td data-time="5:00 PM
to
9:00 PM">
        <p>Name </p>
        <p>Name </p>
        <p>Name </p>
      </td>
      <td data-time="5:00 PM
to
9:00 PM">
        <p>Name </p>
        <p>Name </p>
        <p>Name </p>
      </td>
      <td data-time="5:00 PM
to
9:00 PM">
        <p>Name </p>
        <p>Name </p>
        <p>Name </p>
      </td>
      <td data-time="5:00 PM
to
9:00 PM">
        <p>Name </p>
        <p>Name </p>
        <p>Name </p>
      </td>
    </tr>
  </tbody>
</table>

如果您不知道一些资源：

https://css-tricks.com/snippets/css/complete-guide-grid/ https://css-tricks.com/snippets/css/complete-guide-grid/
https://gridbyexample.com/ https://gridbyexample.com/
https://developer.mozilla.org/en-US/docs/Web/CSS/@supports https://developer.mozilla.org/en-US/docs/Web/CSS/@supports
https://css-tricks.com/get-ready-for-display-contents/ https://css-tricks.com/get-ready-for-display-contents/
https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

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

如何堆叠表格列来模拟日历议程视图？的相关文章

通过 JavaScript 检测浏览器换行

我需要 javascript 来检测每个浏览器包装的文本行并将其包装到 span class line 我读过一些关于测量每个单词的 y 轴的文章但还没有看到可靠的解决方案这是我到目前为止所拥有的看到它Jsfiddle http js
为什么在 HTML 中使用 onClick() 是一种不好的做法？

我多次听说使用 JavaScript 事件例如onClick 在 HTML 中是一种不好的做法因为它不利于语义我想知道以下代码有什么缺点以及如何修复 a href link a 你可能正在谈论不引人注目的 JavaScript htt
在 IE 8 及以下版本中动态添加 @font-face 规则

我使用 IE stylesheet addRule 方法添加 font face 规则但是符号对于该方法的选择器参数来说是不允许的字符因此我收到无效参数错误 s addrule font face font family Fo
Google Maps API 下拉列表，缩放至标记

我正在使用 Google Maps API v3 我有一个带有一些标记的简单地图我还有一个下拉列表我需要最少的代码来完成这项工作我想在下拉列表中选择一个标记并将选定的标记平移到它我已经尝试了一切并在网上查看我发现事情很接近但到
使用或实现可访问性的更好做法是什么？

我有一个下载链接但我找不到任何良好的可访问解决方案来说明如何处理这种情况我遵循一个共同的经验法则按钮做事链接去地方我的情况是我有一个触发文档下载的按钮同一页面我相信这应该是一个具有按钮角色的锚点因为它明确不触发重定向或导航
从 Bootstrap 中删除字形

如何从 bootstrap 3 中删除所有字形实例看起来它已经大量嵌入到 css 文件中了我正在努力使文件大小尽可能最小只需简单地克隆引导程序https github com twbs bootstrap sass https git
如何检测浏览器是否支持自定义元素

我正在查看 Modernizr 它应该有助于功能检测这应该可以帮助确定您的网站是否与给定的 Web 浏览器兼容但我没有看到任何表明我可以使用它来检测自定义 HTML 的内容我们在内容中创建和定义的元素如果不是 Modernizr 我如
在 javascript/jquery 中将光标更改为等待

当调用函数时如何让光标更改为此加载图标以及如何将其更改回 javascript jquery 中的普通光标在你的 jQuery 中使用 body css cursor progress 然后又恢复正常 body css cursor d
删除数据表列中的额外填充

你好我创建了 JQuery DataTables 如下所示所以我的问题是如何删除图片列中过多的填充这就是我初始化表的方式 violators tbl DataTable aoColumnDefs bSortable false a
如何重定向到 instagram://user?username={username}

我的 html 页面上有这个链接可以在特定用户上打开 Instagram 应用程序 a href Link to Instagram Profile a 我一直在寻找自动运行 url instagram user username USE
在 iPhone 3GS 与 iPhone 4 上为 Mobile Safari 嵌入 HTML5 视频

我在服务器上的 mp4 文件中有 H 264 AAC 编码的视频 mime 类型的视频 mp4 添加到 Web 服务器 IIS 7 并且我有一个带有视频标签的页面
如何指定网站的语言？（HTML？）

如何指定页面采用某种语言以便搜索引擎可以理解这是我放在顶部的元标记吗如果是您知道大多数搜索引擎是否使用它来确定语言吗我已将一页英文内容转换为几种不同的语言并希望将该信息包含在 html 中让搜索引擎知道他们正在处理哪种语言快速
使用 jQuery/JS 打开时使
标签的内容具有动画效果

我只想要 HTML5 的内容details标记为滑行动画打开而不是仅仅弹出打开立即出现这可以用 jQuery Javascript 实现吗 Fiddle http jsfiddle net 9h4Hq HTML
从标签获取 href 值

我有以下 html div class threeimages a img alt Australia src Images Services 20button tcm7 9688 gif a div class text h2 a hre
保持未知数量的 div 居中，每行最多 4 个

我有一个简单的问题但我自己无法解决简而言之有一个未知电话我必须在页面中放置的元素数量最多每行 4 个元素但仍居中此图片给您一个提示我为了示例而设置它详细在上图中我涵盖了不同的场景例如如果总共有 5 个元素则应使用第
如何将 Google Charts 与 Vue.js 库一起使用？

我正在尝试使用 Vue js 库使用 Google Charts 制作图表但我不知道如何添加到 div 这是我尝试做的这是如何使用普通 javascript 添加图表这是文档的代码示例 https developers google
如何在使用页面锚点导航时设置“激活”类以在 Angular 2 中引导导航栏？

我正在使用 Angular 2 和 Bootstrap 4 创建一个单页网站我创建了一个始终位于页面顶部的导航栏组件并且我正在使用页面锚点导航 id 请注意我还没有创建路由模块到目前为止还没有必要这样做导航栏代码如下
更改文本输入标签中文本的大小？

我有一个很大的文本输入框但我无法更改字体大小
如何仅在最后一个
处给出透明六边形角度？

我必须制作这样的菜单替代文本 http shup com Shup 330421 1104422739 My Desktop png http shup com Shup 330421 1104422739 My Desktop png
FireFox 中的“contenteditable = true”高度问题

当有空的时候div with contenteditable true CSS contenteditable true border 1px dashed dedede padding 3px HTML div div 在 IE 和 Ch

随机推荐

SQL Server 2005 ROW_NUMBER() 不带 ORDER BY

我正在尝试使用从一个表插入另一个表 DECLARE IDOffset int SELECT IDOffset MAX ISNULL ID 0 FROM TargetTable INSERT INTO TargetTable ID FIELD
内存中“null”在哪里

在java中你不能在声明中声明数组的大小 int 5 scores bad 有人告诉我这是因为 JVM 在对象初始化之前不会分配内存空间如果您有一个实例数组变量自动初始化为默认值 null 该变量是否指向堆中指示 null 的位置空
为什么匿名方法中不允许使用 out 参数？

这不是一个骗局从匿名方法调用带有 ref 或 out 参数的方法 https stackoverflow com questions 1001475 calling a method with ref or out parameters f
一个函数中的两个多态类

我有状态单子的代码 import Control Monad State data ModelData ModelData String data ClientData ClientData String act String gt Sta
SQL Server NOLOCK 和联接

背景我想运行一个性能关键的查询并且我不关心脏读我的问题是如果我使用连接我是否还必须在这些连接上指定 NOLOCK 提示例如是 SELECT FROM table1 a WITH NOLOCK INNER JOIN table2
是否可以从特定方法初始化单例，而不是在执行应用程序时初始化？ [关闭]

Closed 这个问题需要细节或清晰度 help closed questions 目前不接受答案是否可以从特定方法初始化单例而不是在执行应用程序时初始化我需要在 viewdidload 中运行一个方法具体取决于 Singleton
在发布期间标记 TFS Git 存储库

我正在使用 TFS 2017 设置构建发布环境我将构建设置为在每次提交后自动运行当我们准备好发布应用程序的版本时手动创建一个发布然后部署到各种环境我们希望在 git 存储库中标记已发布的版本以便轻松了解哪个 git 修订版本对
如何知道计算C++算法的执行时间？

我想通过查看算法的运行时性能来测试哪种数据结构是最好的我该怎么做例如我已经有一个hashmap
NSDecimalNumber 的 NSDecimalNumber 次方

我有两个 NSDecimalNumbers 我需要应用一个到另一个的幂最初这段代码使用的是双精度数我可以使用 pow 函数来计算它如下所示 double result pow value1 value2 我遇到的问题是我正在将代码转换
如果指向的文件被移动或删除，Linux 上打开的文件句柄会发生什么情况

如果指向的文件同时出现以下情况 Linux 上打开的文件句柄会发生什么情况已移走 gt 文件句柄仍然有效吗已删除 gt 这是否会导致 EBADF 表明文件句柄无效被新文件替换 gt 文件句柄是否指向这个新文件替换为新文件的硬链接 g
为什么在 url 中使用 - 而不是 _

为什么在 url 中使用而不是 url 包含似乎没有什么不好的影响主机名中不允许使用下划线因此 some place com 不是有效的 URL 因为主机名无效 URL 中允许使用下划线因此抛开其他问题不谈 some place
运行一个又一个命令，即使我暂停第一个命令 (Ctrl-z)

我知道在 bash 中我可以通过用分号分隔命令来运行一个又一个命令例如 command1 command2 或者如果我只想command2仅当以下情况时才运行command1成功使用 command1 command2 这可行但如果我
用于在 Python 中将多字节字符转换为 7 位 ASCII 的 Python 库 [关闭]

Closed 这个问题正在寻求书籍工具软件库等的推荐不满足堆栈溢出指南 help closed questions 目前不接受答案是否有一个 python 库可以将多字节非 ASCII 字符转换为某种合理形式的 7 位可显示 ASC
在 Nest 5.5.0 中为属性设置 not_analyzed

我尝试通过 Nest 5 5 0 设置 not analyzed 索引类型但我不知道该怎么做 My init var map new CreateIndexDescriptor INDEX NAME Mappings ms gt ms M
在 Asp.Net MVC 中显示从控制器返回的 JSON 数组数据

我的控制器中有一个操作方法 public ActionResult IndexWithJson int Id int page int pageSize 2 int pageNumber page 1 using var adsRepo n
Laravel 5 中仅为一种环境启用全局中间件

我在 Laravel 5 barryvdh laravel cors 中使用全局中间件但我只希望它在一种环境 dev 上处于活动状态那是因为我只需要在开发环境中使用 Composer 所以它没有安装在生产环境中我在应用程序内核中注册了
通过 nfs 共享 mmap 文件？

场景A 为了在同一主机上运行的两个进程之间共享读写内存块 Joe 从两个进程映射同一个本地文件场景B 为了在两个不同主机上运行的两个进程之间共享读写内存块 Joe 在主机之间通过 nfs 共享一个文件然后从两个进程映射共享文件有人
如何将数据推回 int 类型的二维向量中

我有一个向量想在运行时将 int 数据存储到其中我可以用这种方式将数据存储在 2D 向量中吗 std vector
awk中计算对数

如何在 awk 中计算以 10 为底的对数我试过 2 5 log 10 2 log 10 输出 83051 02180161216529给出 5 7564 但它应该是 12 29836 谢谢以 10 为底的对数的正确公式是 log 2
如何堆叠表格列来模拟日历议程视图？

我想转置 HTML 表格而不使用 JS 或使用另一个表格我有一张桌子里面有一个时间表我想在移动屏幕上折叠成单列我需要this https i stack imgur com 4ioSh png成为this https i stack

如何堆叠表格列来模拟日历议程视图？

如何堆叠表格列来模拟日历议程视图？ 的相关文章

随机推荐

热门标签

如何堆叠表格列来模拟日历议程视图？的相关文章