title: How can i make content of an css table responsive
body: <p>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:</p>
  
  <pre><code>&lt;div class="branduriTable"&gt;
    &lt;div class="bodyTable"&gt;
      &lt;div class="randTable"&gt;
        &lt;div class="cellTable"&gt;
          &lt;a href="" class="brandLogo" hidefocus="true" style="outline: none;"&gt;&lt;img src=""&gt;&lt;/a&gt;&lt;a href="" class="denumireBrand"&gt;Alfa Romeo&lt;/a&gt;&lt;/div&gt;
        &lt;div class="cellTable"&gt;
          &lt;a href="" class="brandLogo" hidefocus="true" style="outline: none;"&gt;&lt;img src=""&gt;&lt;/a&gt;&lt;a href="" class="denumireBrand"&gt;Audi&lt;/a&gt;&lt;/div&gt;
        &lt;div class="cellTable"&gt;
          &lt;a href="" class="brandLogo" hidefocus="true" style="outline: none;"&gt;&lt;img src=""&gt;&lt;/a&gt;&lt;a href="" class="denumireBrand"&gt;BMW&lt;/a&gt;&lt;/div&gt;
        &lt;div class="cellTable"&gt;
          &lt;a href="" class="brandLogo" hidefocus="true" style="outline: none;"&gt;&lt;img src=""&gt;&lt;/a&gt;&lt;a href="" class="denumireBrand"&gt;Jaguar&lt;/a&gt;&lt;/div&gt;
        &lt;div class="cellTable"&gt;
          &lt;a href="" class="brandLogo" hidefocus="true" style="outline: none;"&gt;&lt;img src=""&gt;&lt;/a&gt;&lt;a href="" class="denumireBrand"&gt;Lancia&lt;/a&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="randTable"&gt;
        &lt;div class="cellTable"&gt;
          &lt;a href="" class="brandLogo" hidefocus="true" style="outline: none;"&gt;&lt;img src=""&gt;&lt;/a&gt;&lt;a href="" class="denumireBrand"&gt;Mercedes&lt;/a&gt;&lt;/div&gt;
        &lt;div class="cellTable"&gt;
          &lt;a href="" class="brandLogo" hidefocus="true" style="outline: none;"&gt;&lt;img src=""&gt;&lt;/a&gt;&lt;a href="" class="denumireBrand"&gt;Ford&lt;/a&gt;&lt;/div&gt;
        &lt;div class="cellTable"&gt;
          &lt;a href="" class="brandLogo" hidefocus="true" style="outline: none;"&gt;&lt;img src=""&gt;&lt;/a&gt;&lt;a href="" class="denumireBrand"&gt;Renault&lt;/a&gt;&lt;/div&gt;
        &lt;div class="cellTable"&gt;
          &lt;a href="" class="brandLogo" hidefocus="true" style="outline: none;"&gt;&lt;img src=""&gt;&lt;/a&gt;&lt;a href="" class="denumireBrand"&gt;Jeep&lt;/a&gt;&lt;/div&gt;
        &lt;div class="cellTable"&gt;
          &lt;a href="" class="brandLogo" hidefocus="true" style="outline: none;"&gt;&lt;img src=""&gt;&lt;/a&gt;&lt;a href="" class="denumireBrand"&gt;Skoda&lt;/a&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="randTable"&gt;
        &lt;div class="cellTable"&gt;
          &lt;a href="" class="brandLogo" hidefocus="true" style="outline: none;"&gt;&lt;img src=""&gt;&lt;/a&gt;&lt;a href="" class="denumireBrand"&gt;Ferrari&lt;/a&gt;&lt;/div&gt;
        &lt;div class="cellTable"&gt;
          &lt;a href="" class="brandLogo" hidefocus="true" style="outline: none;"&gt;&lt;img src=""&gt;&lt;/a&gt;&lt;a href="" class="denumireBrand"&gt;Volkswagen&lt;/a&gt;&lt;/div&gt;
        &lt;div class="cellTable"&gt;&amp;nbsp;&lt;/div&gt;
        &lt;div class="cellTable"&gt;&amp;nbsp;&lt;/div&gt;
        &lt;div class="cellTable"&gt;&amp;nbsp;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And this is my css code:</p>
  
  <pre><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;
  }
  </code></pre>
  
  <p>What did i mis ? I'm also new to coding </p>
  
  <p><a href="https://jsfiddle.net/ihopethisusernameisgood/k6uz1bcn/" rel="nofollow noreferrer">Jsfiddle exemple here</a></p>