CSS可折叠部分

Question

我想在我的html页面上有可折叠的部分。

＆＃13;

＆＃13;

.faq ul li {
    display: block;
    float: left;
    padding: 5px;
}

.faq ul li div {
    display: none;
}

.faq ul li div:target {
    display: block;
}

table,tr{
    width:100%;
}

＆＃13;

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<div class="faq">
    <ul>
        <li>
            <a href="#question1">Question 1</a>
            <div id="question1">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>name</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>name</td>
                            <td>blabla</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </li>
        <li>
            <a href="#question2">Question 2</a>
            <div id="question2">Answer 2</div>
        </li>
    </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

输出：

如何让桌子更大/填满整个页面？以及如何列出每行一个项目，而不是在同一行？

Answer 1

这是一个css代码，如果那就是你要问的那个表格会占用整个页面......

CSS

table{
 width:100%;
 height:auto;//make it 100% if you want it to occupy the whole page
 overflow:auto;//make it scroll if you would like to scroll through the values
}

Answer 2

我认为你正在寻找类似的东西：

＆＃13;

＆＃13;

.faq ul {
    position: relative;
    padding: 0;
}

.faq ul li {
    display: block;
    float: left;
    padding: 5px;
}

.faq ul li div {
    display: none;
}

.faq ul li div:target {
    display: block;
}

[id^=question] {
    width:100%;
    left:0;
    position: absolute;
    padding:5px;
    margin: 5px 0 0 0;
}

＆＃13;

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<div class="faq">
    <ul>
        <li>
            <a href="#question1">Question 1</a>
            <div id="question1">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>name</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>name</td>
                            <td>blabla</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </li>
        <li>
            <a href="#question2">Question 2</a>
            <div id="question2">Answer 2</div>
        </li>
    </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

（另见this Fiddle）