HTML表格溢出不起作用

Posted 2023-03-06

技术标签:

【中文标题】HTML表格溢出不起作用【英文标题】：HTML table overflow not working 【发布时间】：2018-08-17 17:04:32 【问题描述】：

我想在html表体溢出时添加滚动条。我不想滚动表头。我的 oracle apex 页面中有这些 html 和 css 代码

HTML

<div class="t-Report-wrap">
<div class="t-Report-tableWrap">
    <table class="t-Report-report" summary="tab">
        <thead>
            <tr>
                <th class="t-Report-colHead" id="CODE" align="center">Code</th>
                <th class="t-Report-colHead" id="HEAD" align="center">Head</th>
            </tr>
        </thead>            
        <tbody>
            <tr> <td > 5198 </td><td >SUSPENCE </td></tr>
            <tr> <td > 1308 </td><td >SHARE IN KNR</td></tr>
            <tr> <td > 4803 </td><td >ONE TIME </td></tr>
            <tr><td >6021</td><td >NEETHI GOODS </td></tr>
            <tr><td >6022</td><td >MANNURE STOCK </td></tr>
            <tr><td >4832</td><td >DONATION TO </td></tr>
            <tr><td >5218</td><td >CALANDER </td></tr>
            <tr><td >4829</td><td >BUILDING TAX </td></tr>
            <tr><td >5199</td><td >BICYCLE ADVANCE </td></tr>
            <tr><td >2509</td><td >BANK LOAN LT MI(SPL) </td></tr>
        </tbody>
    </table>
</div>
<div class="t-Report-links"></div>
<table class="t-Report-pagination t-Report-pagination--bottom" role="presentation"></table> 
</div>

CSS

.t-Report-wrap 
    position: relative;

.t-Report-tableWrap 
    height:180px;
    overflow:auto;  
    margin-top:20px;

.t-Report-tableWrap table 
    width:100%;

.t-Report-tableWrap table thead th .t-Report-colHead 
    position:absolute;   
    top:-20px;
    z-index:2;
    height:20px;
    width:35%;
    border:1px solid red;

但是使用此代码，表格标题也会滚动。这是从 SO 答案 How to display scroll bar onto a html table 中引用的。谁能帮我找出这段代码中的错误？

【问题讨论】：

从您的 CSS 中删除 th 或 .t-Report-colHead，因为它们针对的是相同的元素。谢谢，但标题现在重叠了。标题“head”显示在标题“code”上方。根据您提供的链接，您应该将您的 <th> 文本内容包装在 <span> 中，然后在 CSS 中定位这些内容。所以像<th id="CODE" align="center"><span class="t-Report-colHead">Code</th>. 你知道了。我添加了跨度。现在一切正常，工作正常。谢谢先生。太棒了！我会继续添加这个作为答案。 :) 【参考方案1】：

更新您的th HTML 以包含span：

<th id="CODE" align="center"><span class="t-Report-colHead">Code</span></th>

并编辑您的 CSS 选择器以删除重复的 th：

.t-Report-tableWrap table thead .t-Report-colHead

【讨论】：

【参考方案2】：

您的代码不正确，因为您在 .t-Report-tableWrap table thead th .t-Report-colHead 中的 th 和 .t-Report-colHead 之间添加了一个额外的空格

但是，这是一个有效的代码。

tr
  display: table;
  width: 100%;
  table-layout: fixed;


thead
  display: block;


tbody
  display: block;
  height: 180px;
  overflow: auto;

CODEPEN

希望这会有所帮助。

【讨论】：

有效，但我必须应用宽度：100%，当表格行小于 100% 时，滚动条位于最左边。很高兴能帮上忙。您可以选择正确的答案，以帮助其他用户。谢谢。【参考方案3】：

设置高度并将overflow:auto;添加到.t-Report-tableWrap tbody而不是.t-Report-tableWrap，这样滚动只会影响表格主体。

.t-Report-wrap 
    position: relative;

.t-Report-tableWrap   
    margin-top:20px;

.t-Report-tableWrap table 
    width:100%;

.t-Report-tableWrap table thead th .t-Report-colHead 
    position:absolute;   
    top:-20px;
    z-index:2;
    height:20px;
    width:35%;
    border:1px solid red;

.t-Report-tableWrap tbody
    height:180px;
    overflow:auto;

希望这会有所帮助。

【讨论】：

【参考方案4】：

更改css代码

tbody 
    display:block;
    height:200px;
    overflow:auto;

thead, tbody tr 
    display:table;
    width:100%;
    table-layout:fixed;/* even columns width , fix width of table too*/

thead 
    width: calc( 100% - 1em )/* scrollbar is average 1em/16px width, remove it from thead width */

t-Report-report 
    width:400px;

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div class="t-Report-wrap">
		<div class="t-Report-tableWrap">
			<table class="t-Report-report" summary="tab">
				<thead>
					<tr>
						<th align="center" class="t-Report-colHead" id="CODE">Code</th>
						<th align="center" class="t-Report-colHead" id="HEAD">Head</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>5198</td>
						<td>SUSPENCE</td>
					</tr>
					<tr>
						<td>1308</td>
						<td>SHARE IN KNR</td>
					</tr>
					<tr>
						<td>4803</td>
						<td>ONE TIME</td>
					</tr>
					<tr>
						<td>6021</td>
						<td>NEETHI GOODS</td>
					</tr>
					<tr>
						<td>6022</td>
						<td>MANNURE STOCK</td>
					</tr>
					<tr>
						<td>4832</td>
						<td>DONATION TO</td>
					</tr>
					<tr>
						<td>5218</td>
						<td>CALANDER</td>
					</tr>
					<tr>
						<td>4829</td>
						<td>BUILDING TAX</td>
					</tr>
					<tr>
						<td>5199</td>
						<td>BICYCLE ADVANCE</td>
					</tr>
					<tr>
						<td>2509</td>
						<td>BANK LOAN LT MI(SPL)</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="t-Report-links"></div>
		<table class="t-Report-pagination t-Report-pagination--bottom" role="presentation"></table>
	</div>
</body>
</html>

【讨论】：

【参考方案5】：

我认为 apex 对此有一个设置，请参阅此示例：

没有设置： https://apex.oracle.com/pls/apex/f?p=145797:1

使用设置： https://apex.oracle.com/pls/apex/f?p=145797:12

转到报告属性：

【讨论】：

这是用于交互式报告，但我使用的是表格形式。

以上是关于HTML表格溢出不起作用的主要内容，如果未能解决你的问题，请参考以下文章

溢出自动在android浏览器中不起作用

创建带有溢出的滚动条不起作用？

文本溢出：省略号不起作用[重复]

文本溢出：省略号不起作用，尽管使用了所有必要的 css 先决条件

表格内的html表格和按钮不起作用

HTML表格宽度不起作用