Question

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

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

我遇到的问题是，当打印出表格时，它会拉伸div元素大小。所以我得到的是一个div元素，其高度与表高度相匹配。我尝试使用overflow CSS属性，但它似乎无法正常工作。

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

有没有办法可以做到这一点？有什么例子吗？

HTML code：

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

要包含在div元素中的表

1 个答案: