我怎样才能使 css table 的内容响应

Question

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

<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 table 的内容响应

How can i make content of an css table responsive

css

mobile

responsive-design

css-tables