CSS可折叠部分

Question

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

.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%; 
 
}

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

输出：

如何使表大/填充整个页面？以及如何列出每行一个项目，而不是在同一行？

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

我认为你在寻找这样的事情：

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

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

（另请参阅this Fiddle）