程序员经验分享-hwhale

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

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(使用前将#替换为@)

html

css

responsivedesign

responsive

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

  • 滚动视图上的固定按钮

    我目前正在尝试在屏幕右下角的滚动视图上显示一个按钮 但它不起作用 当我滚动视图时按钮会移动 我尝试先插入按钮 但滚动视图位于其上方 class HomePage extends Component loadUserItems this pr

  • jQuery 函数 .bind 在 IE 中不起作用

    这是我的网站 http johns webdesign com port html 如果您单击小缩略图 则会显示更大的图像 在 Chrome 中它工作得很好 但是当我在 IE9 中尝试它时它什么也没做 这是我的代码 jQuery JavaS

  • 最佳实践：ASP.NET 中的 CSS 或主题？

    什么时候应该使用 ASP NET 主题 什么时候应该使用 CSS 使用其中一种相对于另一种有哪些优点或缺点 我建议使用 CSS 而不是主题 原因是在 CSS 中 您可以修改样式以使其适用于所有浏览器 您可以对主题做同样的事情 但微软的设计师

  • 是否可以使materialize.css模态更大并删除垂直滚动条？

    我刚刚创建了按钮 单击后会弹出一个模式 每个按钮都有一个显示不同练习 gif 的模式 然而 模态框太小 导致用户无法看到整个 gif 迫使他们向下滚动 我想删除滚动条并使模态更大 以便用户可以看到整个 gif 任何帮助都会很棒 这是我的代码

  • CSS @font-face 有时在 Internet Explorer 中有效，但并非总是有效

    我在使用 Internet Explorer 11 中的网络字体时遇到问题 该字体适用于某些使用 IE11 的用户 但不适用于其他用户 即使它们是同一浏览器 对于遇到问题的用户 Modernizr fontface 仍然返回 true 因此

  • 正常显示截断的文本，但悬停时显示完整文本

    我有一个 div 里面有一段左右的文本 我希望它正常显示前几个单词 但在悬停时展开以显示全文 理想情况下 我想仅使用 CSS 来完成此操作 而不需要重复数据 这是我尝试过的 div 1 ONE div

  • 如何在asp.net背后的代码中获取css样式

    我需要从 asp net c 中的代码后面获取 css 样式 在网上没有找到解决方案 是否可以直接从 styles css 文件获取它 还是需要解决方法 我在我的网络应用程序中使用主题 但我还需要进行一些服务器处理 并且我需要 ccs 文件

  • CSS 网格/布局框架，专注于固定元素和单页全屏布局

    经验法则 如果您在布局中过多地使用 CSS 请切换到框架 我已经研究了数十个网格 布局框架 其中大多数都专注于传统的文档网格布局 我的页面更像是一个 SPA 单页应用程序 它类似于桌面应用程序使用的布局 显然 HTML 不能很好地处理这个问

  • 节点 sass 无效 CSS

    node sass 是否支持 use 由于我收到此错误 SassError t family fonts 之后的 CSS 无效 预期的表达式 例如 1px 粗体 为 roboto 这是 Nav scss 的代码 nav width 100

  • 如何按时间间隔翻转div

    您好 请看这个脚本并告诉我如何按时间间隔翻转 A B 和 C div 我希望A先翻转然后停止 B接下来翻转并停止 然后C然后再次回到A B和C 就像循环一样 然后重新开始 这在 CSS3 中可能吗 在此代码中 所有 div 同时翻转 HOL

  • 在 UIWebView 中禁用复制和粘贴

    几乎 我已经尝试了一切方法来禁用复制 粘贴UIWebView但对我来说没有任何作用 我正在加载我的UIWebView来自字符串 字符串数组 如下所示 webView loadHTMLString NSString stringWithFor

  • CSS如何制作可滚动列表

    我正在尝试创建一个由标题和标题下方的项目列表组成的网页 我希望项目列表可以垂直滚动 我还希望网页占据整个窗口 但不要更大 目前我的问题是项目列表不可滚动 而是延伸到窗口底部下方很远 这导致窗口可滚动 应该做什么CSS属性位于html bod

  • IE localStorage 事件失火

    在 Internet Explorer 9 和 10 中 localStorage 实现意外地触发事件 这里有很棒的线索 Chrome 的 localStorage 实现存在错误 https stackoverflow com questi

  • CSS 选择器嵌套

    是否可以在选择器中嵌套选择器 我有很多类似这样的样式 header h1 header img header form 我想压缩它们 使它们看起来像这样 header h1 img form 以提高可读性 这在普通的旧 CSS 中可能吗 不

  • 如何将两个 span 元素一个向左对齐，另一个向右对齐？

    我有两个 span 要素 span style margin right auto 2012 XYZ Corp All Rights Reserved span span style margin left auto Built with

  • 悬停 CSS 仅适用于 Chrome

    嘿 我正在尝试使用 CSS 悬停类 它在 Chrome 上运行良好 但在 Firefox 上运行不佳 任何帮助表示赞赏 这是我的 CSS albumbox labeltext visibility hidden albumbox hover

  • Sphinx内联代码高亮

    我使用 Sphinx 制作一个包含代码示例的网站 我成功地使用了 code block获取语 法高亮的指令 但我无法使用此代码获得内联语法突出显示 role bash code language bash Test inline bash

  • 伪元素的元素类型是什么？

  • 如果 jquery 验证激活，如何在单选按钮中放置红色边框[重复]

    这个问题在这里已经有答案了 我的问题是 如果 jquery 验证像示例图片中那样激活 我无法使单选按钮具有红色边框 任何人都可以帮我解决这个问题吗 http i38 photobucket com albums e149 eloginko

  • 从后面的代码添加外部 css 文件

    我有一个 CSS 文件 例如 SomeStyle css 我是否可以将此样式表文档从其代码隐藏应用到 aspx 页面 您可以将文字控件添加到标头控件中 Page Header Controls Add new System Web UI L

随机推荐

  • 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

热门标签