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

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

可以使用display: flex而不是display: table。

要將編輯器和作者div合併在一起，您可以使用下面的腳本。即使您將表格放入限制寬度的div中，它也會工作。

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>

Answer 2

這是怎麼回事？

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

我用媒體查詢，還可以將表> DIV的第n個孩子，我認爲它去480像素下溢出。我認爲你更好地使用顯示器柔性或自舉網格系統。對於埃夫裏的問題，我希望這兒過得您理解，也對不起我的英文:)

在這裏，您可以調整，看到了差距小提琴：here