gpt4 book ai didi

html - 如何将滚动条放在表格的一侧?

转载 作者:行者123 更新时间:2023-11-28 00:12:21 24 4
gpt4 key购买 nike

我这里有一个 jsfiddle:http://jsfiddle.net/m4HB3/

我有一个带有固定标题的滚动表,它工作正常。我遇到的问题是滚动条的放置位置,它略微放在最后一列的下方,这导致它占用最后一列的一些空间,从而使其他列不对齐。

我的问题是如何将滚动条裁剪到表格的右边才不影响占用列空间?

示例表html如下:

<table id="tableqanda" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th width="5%" class="questionno">Question No.</th>
<th width="27%" class="question">Question</th>
<th width="7%" class="option">Option Type</th>
<th width="11%" class="image">Image</th>

</tr>
</thead>
</table>
<div id="tableqanda_onthefly_container">
<table id="tableqanda_onthefly" cellpadding="0" cellspacing="0">
<tbody>
<tr class="tableqandarow">
<td width="5%" class="questionno">1</td>
<td width="27%" class="question">What is a RAM?</td>
<td width="7%" class="option">A-E</td>
<td width="11%" class="imagetd"><ul class="qandaul"><li>Lighthouse_4.jpg</li></ul></td>
</tr>
<tr class="tableqandarow">
<td width="5%" class="questionno">2</td>
<td width="27%" class="question">Name 3 car maneuvers you may do in a test?</td>
<td width="7%" class="option">A-F</td>
<td width="11%" class="imagetd"><ul class="qandaul"><li>Tulips_3.jpg</li></ul></td>
</tr>
</tbody>
</table>
</div>

下面是CSS:

#tableqanda_onthefly_container
{
width:100%;
overflow-y: scroll;
overflow-x: hidden;
max-height:500px;
}

#tableqanda_onthefly
{
width:100%;
overflow:scroll;
clear:both;
}

#tableqanda_onthefly td
{
border:1px black solid;
border-collapse:collapse;
}

#tableqanda, #tableqanda_onthefly{
border:1px black solid;
border-collapse:collapse;
table-layout:fixed;
word-wrap:break-word;
}

#tableqanda{
width:100%;
margin-left:0;
float:left;
}

#tableqanda td {
vertical-align: middle;
border:1px black solid;
border-collapse:collapse;
}

#tableqanda th{
border:1px black solid;
border-collapse:collapse;
text-align:center;
}

.tableqandarow{
border:1px black solid;
border-collapse:collapse;
}

最佳答案

试试这个 fiddle :http://jsfiddle.net/m4HB3/29/

我只是将你的 table 包装到 ID 为 container 的容器 div 中,删除了你的 overflow 属性从表格中并在包含的 div 上设置以下内容(您可以将高度更改为任何您想要的高度,我只是将其保留为 75 以进行演示):

#container
{
height: 75px;
overflow-x: auto;
}

编辑:经过一些调整,这就是他想要的 http://jsfiddle.net/m4HB3/37/

关于html - 如何将滚动条放在表格的一侧?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14470112/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com