Question

我有一个表，我想把它放在一个div中，这样表只显示到div的高度，并且可以滚动查看表的其余部分。这是我的代码：

＆＃13;

#listTimes {
  margin-right: 0;
  height: 100px;
}

#timesList table {
  border-collapse: collapse;
  margin: 0 auto;
  right: 0;
  left: 0;
}

#timesList table, td, th {
  border: 1px solid black;
  padding: 5px;
}

#timesList th {
  text-align: left;
}

#session {
  border-radius: 5px 5px 0 0;
  height: 10px;
  width: 20%;
  margin: 0 auto;
}

＆＃13;

<html>
  <body>
    <div class="listTimes">
      <form id="session">
	          <select name="sessions" onchange="showUser(this.value)">
	            <option value="1">Session 1</option>
	            <option value="2">Session 2</option>
	            <option value="3">Session 3</option>
	            <option value="4">Session 4</option>
	            <option value="5">Session 5</option>
	          </select>
	         </form>
	         <br>
	         <div id="timesList">
             <!-- This is where the table is -->
             <table>
               <tr>
                 <th>No.</th>
                 <th>foo</th>
                 <th>bar</th>
               </tr>
               <tr>
                 <th>1</th>
                 <th>fubar</th>
                 <th>lnrbaaet</th>
               </tr>
             </table>
	         </div>
	      </div>
    </div>
  </body>
</html>

＆＃13;

现在，桌子就像它一样。我想一起为表单和表格设置一个高度，当我滚动查看表格时，表格应该跟着我。我尝试使用高度属性，溢出属性，但没有一个工作。

Answer 1

不确定你的意思＆＃34;表格应该跟随我＆＃34;但我认为你的意思是它应该保持固定。在这种情况下，您需要将高度和溢出添加到#timesList元素。如果没有，请将其添加到#listTimes元素。

＆＃13;

#listTimes {
  margin-right: 0;
  height: 100px;
}
#timesList {
  height: 50px;
  overflow: auto;
}
#timesList table {
  border-collapse: collapse;
  margin: 0 auto;
  right: 0;
  left: 0;
}

#timesList table, td, th {
  border: 1px solid black;
  padding: 5px;
}

#timesList th {
  text-align: left;
}

#session {
  border-radius: 5px 5px 0 0;
  height: 10px;
  width: 20%;
  margin: 0 auto;
}

＆＃13;

<html>
  <body>
    <div class="listTimes">
      <form id="session">
	          <select name="sessions" onchange="showUser(this.value)">
	            <option value="1">Session 1</option>
	            <option value="2">Session 2</option>
	            <option value="3">Session 3</option>
	            <option value="4">Session 4</option>
	            <option value="5">Session 5</option>
	          </select>
	         </form>
	         <br>
	         <div id="timesList">
             <!-- This is where the table is -->
             <table>
               <tr>
                 <th>No.</th>
                 <th>foo</th>
                 <th>bar</th>
               </tr>
               <tr>
                 <th>1</th>
                 <th>fubar</th>
                 <th>lnrbaaet</th>
               </tr>
             </table>
	         </div>
	      </div>
    </div>
  </body>
</html>

＆＃13;

Answer 2

在overflow-y

上添加height属性集#timesList

 #timesList {
      margin-right: 0;
      height: 100px;
      overflow-y: scroll;
    }

＆＃13;

.listTimes {
  height: 100px;
  overflow: hidden;
}

#timesList {
  height: 100%;
  overflow-y: scroll;
  /* rough width of scrollbar */
  padding-right: 20px;
  margin-right: -20px;
}

#timesList table {
  border-collapse: collapse;
  margin: 0 auto;
  right: 0;
  left: 0;
}

#timesList table,
td,
th {
  border: 1px solid black;
  padding: 5px;
}

#timesList th {
  text-align: left;
}

#session {
  border-radius: 5px 5px 0 0;
  height: 10px;
  width: 20%;
  margin: 0 auto;
}

＆＃13;

<div class="listTimes">
  <form id="session">
    <select name="sessions" onchange="showUser(this.value)">
	            <option value="1">Session 1</option>
	            <option value="2">Session 2</option>
	            <option value="3">Session 3</option>
	            <option value="4">Session 4</option>
	            <option value="5">Session 5</option>
	          </select>
  </form>
  <br>
  <div id="timesList">
    <!-- This is where the table is -->
    <table>
      <tr>
        <th>No.</th>
        <th>foo</th>
        <th>bar</th>
      </tr>
      <tr>
        <th>1</th>
        <th>fubar</th>
        <th>lnrbaaet</th>
      </tr>
      <tr>
        <th>1</th>
        <th>fubar</th>
        <th>lnrbaaet</th>
      </tr>
      <tr>
        <th>1</th>
        <th>fubar</th>
        <th>lnrbaaet</th>
      </tr>
      <tr>
        <th>1</th>
        <th>fubar</th>
        <th>lnrbaaet</th>
      </tr>
    </table>
  </div>
</div>

＆＃13;

如何设置div的样式，以便内部的表部分隐藏并可以滚动

2 个答案: