代码之家 › 专栏 › 技术社区 › aravk33 DanS

如何设置div的样式,使其内部的表部分隐藏并可以滚动

row html-table scroll css

aravk33 DanS · 技术社区 · 7 年前

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

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

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

2 回复 | 直到 7 年前

sn3ll 7 年前

我不确定你所说的“表单应该跟随我”是什么意思,但我想你的意思是它应该保持不变。在这种情况下,需要将高度和溢出量添加到 #timesList 要素如果不是,则将其添加到#listTimes元素。

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

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

sol 7 年前

overflow-y 属性集 height #timesList

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

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

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