Question

我试图让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

Answer 1

要使其响应，您可以添加此CSS：

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

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

代码段：

.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 -->

Answer 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; }}

希望它适合你。

如何使css表的内容响应

2 个答案: