如何使 css 表的内容响应

【问题标题】：How can i make content of an css table responsive如何使 css 表的内容响应
【发布时间】：2023-03-06 19:36:01
【问题描述】：

我正在尝试使 css 表的内容具有响应性，但我没有任何运气。 对不起，如果我在这次交易中犯了任何错误，我是堆栈溢出的新手。 这是我的 html 表：

<div class="branduriTable">
  <div class="bodyTable">
    <div class="randTable">
      <div class="cellTable">
        <a href="" class="brandLogo" hidefocus="true" style="outline: none;"><img src=""></a><a href="" class="denumireBrand">Alfa Romeo</a></div>
      <div class="cellTable">
        <a href="" class="brandLogo" hidefocus="true" style="outline: none;"><img src=""></a><a href="" class="denumireBrand">Audi</a></div>
      <div class="cellTable">
        <a href="" class="brandLogo" hidefocus="true" style="outline: none;"><img src=""></a><a href="" class="denumireBrand">BMW</a></div>
      <div class="cellTable">
        <a href="" class="brandLogo" hidefocus="true" style="outline: none;"><img src=""></a><a href="" class="denumireBrand">Jaguar</a></div>
      <div class="cellTable">
        <a href="" class="brandLogo" hidefocus="true" style="outline: none;"><img src=""></a><a href="" class="denumireBrand">Lancia</a></div>
    </div>
    <div class="randTable">
      <div class="cellTable">
        <a href="" class="brandLogo" hidefocus="true" style="outline: none;"><img src=""></a><a href="" class="denumireBrand">Mercedes</a></div>
      <div class="cellTable">
        <a href="" class="brandLogo" hidefocus="true" style="outline: none;"><img src=""></a><a href="" class="denumireBrand">Ford</a></div>
      <div class="cellTable">
        <a href="" class="brandLogo" hidefocus="true" style="outline: none;"><img src=""></a><a href="" class="denumireBrand">Renault</a></div>
      <div class="cellTable">
        <a href="" class="brandLogo" hidefocus="true" style="outline: none;"><img src=""></a><a href="" class="denumireBrand">Jeep</a></div>
      <div class="cellTable">
        <a href="" class="brandLogo" hidefocus="true" style="outline: none;"><img src=""></a><a href="" class="denumireBrand">Skoda</a></div>
    </div>
    <div class="randTable">
      <div class="cellTable">
        <a href="" class="brandLogo" hidefocus="true" style="outline: none;"><img src=""></a><a href="" class="denumireBrand">Ferrari</a></div>
      <div class="cellTable">
        <a href="" class="brandLogo" hidefocus="true" style="outline: none;"><img src=""></a><a href="" class="denumireBrand">Volkswagen</a></div>
      <div class="cellTable">&nbsp;</div>
      <div class="cellTable">&nbsp;</div>
      <div class="cellTable">&nbsp;</div>
    </div>
  </div>
</div>

这是我的 CSS 代码：

.branduriTable {
  display: table;
  width: 100%;
}

.randTable {
  display: table-row;
  margin: 0px 20px;
}

.cellTable {
  border: 1px solid #999999;
  display: table-cell;
  padding: 10px 20px 0px 20px;
}

.bodyTable {
  display: table-row-group;
}

.brandLogo {
  display: block;
  text-align: center;
  padding: 20px 10px 0 20px;
  background: none;
  margin-bottom: 8px;
}

.denumireBrand {
  display: block;
  text-align: center;
  color: #0033cc;
  text-decoration: none;
  font-size: 15px;
  margin-bottom: 25px;
  font-family: "Comic Sans MS", cursive, sans-serif;
}

我错过了什么？我也是编码新手

Jsfiddle exemple here

【问题讨论】：

  • 你没有解释这个例子中的问题。该表看起来对调整窗口大小的响应很好。您是否特别询问如何使用响应式媒体查询（您的示例没有）？
  • 当我在手机上打开这张桌子时，它看起来真的很不整洁
  • 我可以放置一个指向我的页面的链接吗？
  • 是的，这样做@I0sif
  • @Jon Uleis I0sif 只是想让它看起来像弹出或其他东西一样好

标签： css mobile responsive-design css-tables


【解决方案1】：

为了让它响应，你可以添加这个 CSS：

 div {
  transition: .2s ease-out;
}

div:hover {
  box-shadow: 0 3px 10px rgba(0,0,0,.2);
  transform: translate3d(0,-2px,0);
}

代码 sn-p：

.branduriTable {
  display: table;
  width: 100%;
}

.randTable {
  display: table-row;
  margin: 0px 20px;
}

.cellTable {
  border: 1px solid #999999;
  display: table-cell;
  padding: 10px 20px 0px 20px;
}

.bodyTable {
  display: table-row-group;
}

.brandLogo {
  display: block;
  text-align: center;
  padding: 20px 10px 0 20px;
  background: none;
  margin-bottom: 8px;
}

.denumireBrand {
  display: block;
  text-align: center;
  color: #0033cc;
  text-decoration: none;
  font-size: 15px;
  margin-bottom: 25px;
  font-family: "Comic Sans MS", cursive, sans-serif;
}
div {
  transition: .2s ease-out;
}

div:hover {
  box-shadow: 0 3px 10px rgba(0,0,0,.2);
  transform: translate3d(0,-2px,0);
}
<div class="branduriTable">
  <div class="bodyTable">
    <div class="randTable">
      <div class="cellTable">
        <a href="" class="brandLogo" hidefocus="true" style="outline: none;"><img src="" alt=""></a><a href="" class="denumireBrand" hidefocus="true" style="outline: none;">Alfa Romeo</a></div>
      <div class="cellTable">
        <a href="" class="brandLogo" hidefocus="true" style="outline: none;"><img src="" alt=""></a><a href="" class="denumireBrand" hidefocus="true" style="outline: none;">Audi</a></div>
      <div class="cellTable">
        <a href="" class="brandLogo" hidefocus="true" style="outline: none;"><img src="" alt=""></a><a href="" class="denumireBrand" hidefocus="true" style="outline: none;">BMW</a></div>
      <div class="cellTable">
        <a href="" class="brandLogo" hidefocus="true" style="outline: none;"><img src="" alt=""></a><a href="" class="denumireBrand" hidefocus="true" style="outline: none;">Jaguar</a></div>
      <div class="cellTable">
        <a href="" class="brandLogo" hidefocus="true" style="outline: none;"><img src="" alt=""></a><a href="" class="denumireBrand" hidefocus="true" style="outline: none;">Lancia</a></div>
    </div>
    <div class="randTable">
      <div class="cellTable"><a href="" class="brandLogo" hidefocus="true" style="outline: none;"><img src="" alt=""></a><a href="" class="denumireBrand" hidefocus="true" style="outline: none;">Mercedes</a></div>
      <div class="cellTable"><a href="" class="brandLogo" hidefocus="true" style="outline: none;"><img src="" alt=""></a><a href="" class="denumireBrand" hidefocus="true" style="outline: none;">Ford</a></div>
      <div class="cellTable"><a href="" class="brandLogo" hidefocus="true" style="outline: none;"><img src="" alt=""></a><a href="" class="denumireBrand" hidefocus="true" style="outline: none;">Renault</a></div>
      <div class="cellTable"><a href="" class="brandLogo" hidefocus="true" style="outline: none;"><img src="" alt=""></a><a href="" class="denumireBrand" hidefocus="true" style="outline: none;">Jeep</a></div>
      <div class="cellTable"><a href="" class="brandLogo" hidefocus="true" style="outline: none;"><img src="" alt=""></a><a href="" class="denumireBrand" hidefocus="true" style="outline: none;">Skoda</a></div>
    </div>
    <div class="randTable">
      <div class="cellTable"><a href="" class="brandLogo" hidefocus="true" style="outline: none;"><img src="" alt=""></a><a href="" class="denumireBrand" hidefocus="true" style="outline: none;">Ferrari</a></div>
      <div class="cellTable"><a href="" class="brandLogo" hidefocus="true" style="outline: none;"><img src="" alt=""></a><a href="" class="denumireBrand" hidefocus="true" style="outline: none;">Volkswagen</a></div>
      <div class="cellTable">&nbsp;</div>
      <div class="cellTable">&nbsp;</div>
      <div class="cellTable">&nbsp;</div>
    </div>
  </div>
</div>
<!-- DivTable.com -->

【讨论】：

  • 再看看你的代码，因为它在代码 sn-p 中运行良好。 @I0sif
  • 看看你的代码，因为代码 sn-p 可以工作@I0sif
  • @T.Bragg “响应式”，与响应式设计一样，指的是调整其大小和布局以适应其所在窗口/屏幕的页面。您在光标悬停状态上添加了阴影 - 这是交互式的，但没有响应。
  • 你不能在移动设备上进行真正的交互，因为没有鼠标
【解决方案2】：

我发现当设备屏幕达到 512px 或以下时问题就开始了。

所以这是我的解决方案（完全响应式）：

1. First of all you need to add this viewport meta tag just after the `head` tag starts.
<meta name="viewport" content="width=device-width"> 


2. and then add this media query in your `style.css` file
@media (max-width:512px){.cellTable { display: block; padding: 5px; }}

希望它对你有用。

【讨论】：

  • 您好，首先感谢您的时间并尝试帮助我 :)，但是作为一个新的 wordpress 用户，我在哪里插入这两个行代码...对不起我的菜鸟问题
  • 刚刚编辑了我的答案。在 head 标签内添加 viewport 元标签（在 head 开始之后）并将媒体查询添加到 custom.css 文件或 style.css 文件中
  • 很高兴能帮上忙。
猜你喜欢
  • 2016-04-05
  • 1970-01-01
  • 2014-04-22
  • 1970-01-01
  • 2013-07-23
  • 1970-01-01
  • 2014-02-17
  • 2018-10-10
  • 2020-07-18
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode