CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Martin AJ
Martin AJ

Reputation: 6697

How can I break down table's cells on small screens?

Here is my code:

.wrapper {
    border: 1px solid red;
    padding-left: 20px;
}

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

.table > div {
  display: table-cell;
  border: 1px solid green;
  min-width: 190px;
}
<div class="wrapper">    

<div class="table">
  <div class="share_edit_flag">
    <span>share</span>
    <span>edit</span>
    <span>close</span>
  </div>

  <div class="editor">
    <a href="#">edited May 21 16 at 11:58</a>
    <div class="profile">
      <img src="#" />
      <a href="#">Rory O'Kane</a>
      <b>12.6k</b>
      <!-- I don't have any badge in my website -->
    </div>
  </div>

  <div class="author">
    <a href="#">asked May 21 16 at 11:51</a>
    <div class="profile">
      <img src="#" />
      <a href="#">vasanthkumarmani</a>
      <b>1</b>
      <!-- I don't have any badge in my website -->
    </div>
  </div>
</div>

</div>

Please resize the page. As you see, green box comes out of the red box on a small screen.

Anyway I want to break down both div.author and div.editor together when the parent's width is smaller than childs' width. Is doing that possible?

Upvotes: 0

Views: 54

Answers (2)

pan.goth
pan.goth

Reputation: 1485

You can use display: flex instead of display: table.

To wrap editor and author divs together you can use the script below. It will be working even if you put your table into a div with restricted width.

JSFiddle

$(window).resize(function() {
  setTableDirection();
});

setTableDirection();

function setTableDirection() {
  var $table = $('.table');

  if ($table.width() <= 580) {
    $table.css('flex-direction', 'column');
  } else {
    $table.css('flex-direction', 'row');
  }
}
.wrapper {
  border: 1px solid red;
  padding-left: 20px;
}

.table {
  display: flex;
  flex-wrap: wrap;
}

.table>div {
  border: 1px solid green;
  min-width: 190px;
  flex-grow: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">

  <div class="table">
    <div class="share_edit_flag">
      <span>share</span>
      <span>edit</span>
      <span>close</span>
    </div>

    <div class="editor">
      <a href="#">edited May 21 16 at 11:58</a>
      <div class="profile">
        <img src="#" />
        <a href="#">Rory O'Kane</a>
        <b>12.6k</b>
        <!-- I don't have any badge in my website -->
      </div>
    </div>

    <div class="author">
      <a href="#">asked May 21 16 at 11:51</a>
      <div class="profile">
        <img src="#" />
        <a href="#">vasanthkumarmani</a>
        <b>1</b>
        <!-- I don't have any badge in my website -->
      </div>
    </div>
  </div>

</div>

Upvotes: 1

Teshtek
Teshtek

Reputation: 1342

What about this?

.wrapper {
    border: 1px solid red;
    padding-left: 20px;
}

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

.table > div {
  display: table-cell;
  border: 1px solid green;
  min-width: 190px;
}

@media screen and (max-width: 480px) {
  .table > div {
  display: table-cell;
  border: 1px solid green;
  min-width: 190px;
  float:left;
}
  .table > div:nth-child(1){
     clear: both;
  }
}
<div class="wrapper">    

<div class="table">
  <div class="share_edit_flag">
    <span>share</span>
    <span>edit</span>
    <span>close</span>
  </div>

  <div class="editor">
    <a href="#">edited May 21 16 at 11:58</a>
    <div class="profile">
      <img src="#" />
      <a href="#">Rory O'Kane</a>
      <b>12.6k</b>
      <!-- I don't have any badge in my website -->
    </div>
  </div>

  <div class="author">
    <a href="#">asked May 21 16 at 11:51</a>
    <div class="profile">
      <img src="#" />
      <a href="#">vasanthkumarmani</a>
      <b>1</b>
      <!-- I don't have any badge in my website -->
    </div>
  </div>
</div>

</div>

I used media queries and also nth-child of your table > div, I supposed it go overflow under 480px. I think is better for you to use display flex or bootstrap grid system . For evry question I'm here.I hope you understand and also sorry for my english :)

Here a fiddle you can resize and see the difference : here

Upvotes: 1

Related Questions