html - div元素中包含的表

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

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

我遇到的问题是在打印出表格时，它会拉伸div元素的大小。因此，我将得到一个div元素，其高度将与表格高度匹配。我尝试使用overflow CSS属性，但是它似乎不起作用。

基本上，我想在这里实现的是在div元素中包含一个包含许多行的表，而无需扩展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;
}

最佳答案

您可能会考虑研究flexbox。查阅此资源以快速了解一下：

http://flexboxin5.com/

关于html - div元素中包含的表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28995531/