我正在尝试制作一个允许水平滚动的表格,但即使我在标题中指定了列宽,它也会将它们缩小到 div 大小。
我希望它向右溢出,并允许滚动。
Here is a link to a jsfiddle test与我当前的实现类似,但这里有一个运行相同代码的代码片段:
.mainframe {
overflow: hidden;
position: fixed;
background-color: blue;
height:200px;
width:500px;
}
.wrapper {
margin: 5%;
width: 90%;
height: 90%;
background-color: red;
}
.allow-scroll {
position: relative;
height: 100%;
width: 100%;
overflow-y: scroll;
overflow-x: scroll;
background-color: lime;
}
<div class="mainframe">
<div class="wrapper">
<div class="allow-scroll">
<table>
<tr>
<th style="width:200px">Long name item 1</th>
<th style="width:300px">Even longer name item 2</th>
<th style="width:400px">Super crazy long item 3 need more words</th>
<th style="width:200px">Short item 4</th>
<th style="width:300px">Somewhat long time 5</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
</div>
</div>
</div>
此外,有人可以解释为什么“5% 的利润率”在底部不起作用,我可以做些什么吗?
最佳答案
您可以为表格添加宽度,使其水平滚动。
table {
width:1400px;
}
更好的选择是使用 table-layout
属性。
table {
width:100%;
table-layout:fixed;
}
您遇到的边距问题是由 .mainframe
元素的高度引起的。
删除height: 200px;
如果您需要 .mainframe
元素的高度并且您知道它将是固定高度,您只需降低 .wrapper
元素的高度。您可以使用精确的像素高度。我在下面使用了百分比。
.wrapper { height: 75%; } // This percentage looks about right.
关于html - 如何在具有特定列大小的 div 中制作一个 html 滚动表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38110496/