CODEWITHSUNDEEP
cssmobileresponsive-designcss-tables
I0sif
I0sif

Reputation: 3

How can i make content of an css table responsive

I am trying to make the contents of a css table to be responsive and I'm not having any luck. Sorry if i made any mistake in this trade, I am new to stack overflow. This is my 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>

And this is my css code:

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

What did i mis ? I'm also new to coding

Jsfiddle exemple here

Upvotes: 0

Views: 62

Answers (2)

Rahul
Rahul

Reputation: 518

I figured out that the problem starts when the device screen reaches on 512px or below.

So here's my solution(which is completely responsive): 

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

Hope it works for you.

Upvotes: 0

ca1c
ca1c

Reputation: 1295

To make it responsive you could add this CSS: 

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

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

The Code snippet:

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

Upvotes: 1

Related Questions