如何在小屏幕上分解表格的单元格？

Question

这是我的代码：

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

请调整页面大小。如您所见，绿色框出现在小屏幕上的红色框中。

无论如何，当父级宽度小于子级宽度时，我想要同时分解div.author和div.editor。这样做可能吗？

Answer 1

这个怎么样？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我使用了媒体查询，也使用了表格的第n个孩子＆gt; div，我认为它会在480px下溢出。我认为使用display flex或bootstrap网格系统更好。对于evry问题，我在这里。我希望你理解并对我的英语表示抱歉:)。

这里有一个小提琴你可以调整大小并看出差异：here

Answer 2

您可以使用display: flex代替display: table。

要将编辑器和作者div组合在一起，您可以使用下面的脚本。即使您将表格放入宽度有限的div中，它也会起作用。

JSFiddle

＆＃13;

＆＃13;

$(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');
  }
}

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;