html - 要包含在 div 元素中的表格

Question

我创建了一个表单，它接受一个词，然后让它在 Twitter 上搜索包含该词的 20 条最新推文。

最初，表单包含在一个 div 元素中。当表单接收到输入时，它将在表格中打印出这 20 条推文。

我遇到的问题是，当表格被打印出来时，它拉伸(stretch)了 div 元素的大小。所以我会得到一个 div 元素，其高度与表格高度匹配。我尝试使用 overflow CSS 属性，但它似乎不起作用。

基本上，我想在这里实现的是在 div 元素中包含一个包含许多行的表格，而不会拉伸(stretch) div 元素的大小。

有什么办法可以做到吗？有例子吗？

HTML代码:

<section class="wrapper">
<div class="header"><h2>Search for tweets</h2></div>

<form method="get">
    <input type="text" name="search" value="<%= h @params[:search] %>"/>
    <input type="submit" value="submit"/>
</form>

<% unless @tweets.nil? %>
    <table class="landingpage">
        <tr>
            <th width="15%">User</th>
            <th width="40%">Text</th>
            <th width="17%">Date</th>
            <th width="10%">Retweets</th>
            <th width="10%">Favourites</th>
        </tr>
        <% @tweets.each do | tweet | %>
        <tr>
            <td><%= tweet.user.screen_name %></td>
            <td><%= tweet.text %></td>
            <td><%= tweet.created_at %></td>
            <td><%= tweet.retweet_count %></td>
            <td><%= tweet.favorite_count %></td>
        </tr>

        <% end %>
    </table>
<% end %>

CSS 代码:

.wrapper {
position:absolute;
top:13%;
left:24%;
margin-top: 5px;
display:table;
margin-left: 10px;
background-color: #92ff6c;
width: 800px;
height: 650px;
border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
overflow-x:auto;
}

.landingpage {
border-collapse: collapse;
width:95%;
margin-top: 2%;
margin-left:auto;
margin-right:auto;
table-layout:fixed;
overflow:auto;
}

Answer 1

您可能会考虑研究 flexboxes。查看此资源以快速了解:

http://flexboxin5.com/