我有一个使用div创建的HTML表。
HTML代码：
<div class = "content-table">
<div class = "table-row table-row1">
<div class = "left-align column1"> </div>
<div class = "left-align column2">Header</div>
<div class = "left-align column3">
<span><strong>Order Activities</strong></span><br/>
<table style="width:100%">
<tr>
<th>ACT NO</th>
<th>TYPE</th>
<th>STATUS</th>
<th>REQUIRED-BY</th>
</tr>
<tr>
<td>01</td>
<td>D1PR01AG<br/> PHONEBOOKS (AUTOGEN) DO NOT COM/CAN MANUALLY</td>
<td><br/>ACT</td>
<td><br/>15/06/16 17:00</td>
</tr>
<tr>
<td>08</td>
<td>Jackson</td>
<td>ACT</td>
<td>20/06/16 17:00</td>
</tr>
</table>
</div>
</div>
<div class = "table-row table-row2">
<div class = "left-align column1"> </div>
<div class = "left-align column2"><strong>DAP</strong><br/>224466/1</div>
<div class = "left-align column3">
<span><strong>PHONEBOOKS (AUTOGEN) DO NOT COM/CAN MANUALLY</strong></span><br/><br/>
<table style="width:100%">
<tr>
<td>ACT</td>
<td>Action<br/> From table: JMINA Header: HC05C Instr: FIRST</td>
<td>JMENHDC</td>
<td>20/06/16 17:00</td>
</tr>
</table>
</div>
</div>
<div class = "table-row table-row3">
<div class = "left-align column1">03-03-2016<br/>03:36:13</div>
<div class = "left-align column2">Image Signature<br/>Notes</div>
<div class = "left-align column3">
<span><strong>Engineer EIN:</strong>607614772</span><br/>
<span><strong>NAME:</strong>Signed By: Atish</span><br/>
<span><strong>Are you able to capture customer survey and signature?:</strong>Yes </span><br/>
<span><strong>Did the Openreach Engineer turn up when we said they would?: </strong>Yes</span><br/>
<span><strong>Did they do the job needed ? (And if not, at least explain why they cpuldn't ?): </strong>Yes</span><br/>
</div>
</div>
<div class = "table-row table-row2">
<div class = "left-align column1"> </div>
<div class = "left-align column2"><strong>DAP</strong><br/>224466/1</div>
<div class = "left-align column3">
<span><strong>PHONEBOOKS (AUTOGEN) DO NOT COM/CAN MANUALLY</strong></span><br/><br/>
<table style="width:100%">
<tr>
<td>ACT</td>
<td>Action<br/> From table: JMINA Header: HC05C Instr: FIRST</td>
<td>JMENHDC</td>
<td>20/06/16 17:00</td>
</tr>
</table>
</div>
</div>
<div class = "table-row table-row3">
<div class = "left-align column1">03-03-2016<br/>03:36:13</div>
<div class = "left-align column2">Image Signature<br/>Notes</div>
<div class = "left-align column3">
<span><strong>Engineer EIN:</strong>607614772</span><br/>
<span><strong>NAME:</strong>Signed By: Atish</span><br/>
<span><strong>Are you able to capture customer survey and signature?:</strong>Yes </span><br/>
<span><strong>Did the Openreach Engineer turn up when we said they would?: </strong>Yes</span><br/>
<span><strong>Did they do the job needed ? (And if not, at least explain why they cpuldn't ?): </strong>Yes</span><br/>
</div>
</div>
</div>
这里我的每个表格行都没有固定的高度。所以，现在我想让content-table类垂直滚动。
CSS
.content-table
{
overflow-y: scroll;
height: 437px;
}
当我将上述样式添加到content-table类时，每个表行高度变为437px。我只想在不更改content-table高度的情况下使table-row类垂直滚动。
如何解决此问题？
编辑：表格行CSS
.table-row
{
width: 100%;
height: 100%;
display: inline-block;
font-size: 13px;
}
答案 0 :(得分：1)
只需在css中修改您的课程 .content-table 到表格行 如下
.table-row
{
overflow-y: scroll;
height: 437px;
}
答案 1 :(得分：1)
从height: 100%; css中删除.table-row。此属性导致内联块为其父级（内容表）的高度的100％。
.table-row
{
width: 100%;
display: inline-block;
font-size: 13px;
}
.content-table
{
overflow-y: scroll;
height: 437px;
}<div class = "content-table">
<div class = "table-row table-row1">
<div class = "left-align column1"> </div>
<div class = "left-align column2">Header</div>
<div class = "left-align column3">
<span><strong>Order Activities</strong></span><br/>
<table style="width:100%">
<tr>
<th>ACT NO</th>
<th>TYPE</th>
<th>STATUS</th>
<th>REQUIRED-BY</th>
</tr>
<tr>
<td>01</td>
<td>D1PR01AG<br/> PHONEBOOKS (AUTOGEN) DO NOT COM/CAN MANUALLY</td>
<td><br/>ACT</td>
<td><br/>15/06/16 17:00</td>
</tr>
<tr>
<td>08</td>
<td>Jackson</td>
<td>ACT</td>
<td>20/06/16 17:00</td>
</tr>
</table>
</div>
</div>
<div class = "table-row table-row2">
<div class = "left-align column1"> </div>
<div class = "left-align column2"><strong>DAP</strong><br/>224466/1</div>
<div class = "left-align column3">
<span><strong>PHONEBOOKS (AUTOGEN) DO NOT COM/CAN MANUALLY</strong></span><br/><br/>
<table style="width:100%">
<tr>
<td>ACT</td>
<td>Action<br/> From table: JMINA Header: HC05C Instr: FIRST</td>
<td>JMENHDC</td>
<td>20/06/16 17:00</td>
</tr>
</table>
</div>
</div>
<div class = "table-row table-row3">
<div class = "left-align column1">03-03-2016<br/>03:36:13</div>
<div class = "left-align column2">Image Signature<br/>Notes</div>
<div class = "left-align column3">
<span><strong>Engineer EIN:</strong>607614772</span><br/>
<span><strong>NAME:</strong>Signed By: Atish</span><br/>
<span><strong>Are you able to capture customer survey and signature?:</strong>Yes </span><br/>
<span><strong>Did the Openreach Engineer turn up when we said they would?: </strong>Yes</span><br/>
<span><strong>Did they do the job needed ? (And if not, at least explain why they cpuldn't ?): </strong>Yes</span><br/>
</div>
</div>
<div class = "table-row table-row2">
<div class = "left-align column1"> </div>
<div class = "left-align column2"><strong>DAP</strong><br/>224466/1</div>
<div class = "left-align column3">
<span><strong>PHONEBOOKS (AUTOGEN) DO NOT COM/CAN MANUALLY</strong></span><br/><br/>
<table style="width:100%">
<tr>
<td>ACT</td>
<td>Action<br/> From table: JMINA Header: HC05C Instr: FIRST</td>
<td>JMENHDC</td>
<td>20/06/16 17:00</td>
</tr>
</table>
</div>
</div>
<div class = "table-row table-row3">
<div class = "left-align column1">03-03-2016<br/>03:36:13</div>
<div class = "left-align column2">Image Signature<br/>Notes</div>
<div class = "left-align column3">
<span><strong>Engineer EIN:</strong>607614772</span><br/>
<span><strong>NAME:</strong>Signed By: Atish</span><br/>
<span><strong>Are you able to capture customer survey and signature?:</strong>Yes </span><br/>
<span><strong>Did the Openreach Engineer turn up when we said they would?: </strong>Yes</span><br/>
<span><strong>Did they do the job needed ? (And if not, at least explain why they cpuldn't ?): </strong>Yes</span><br/>
</div>
</div>
</div>
答案 2 :(得分：1)
问题在于，当.content-table的高度设置为437px时，预计所有.table-row s＆＃39;高度全部扩展到437px，因为它们是height: 100%，告诉浏览器将其高度设置为.content-table的高度，尝试使用max-height: 437px代替.content-table
示例：https://jsfiddle.net/vxavj8cv/1/
将overflow-y的{{1}}更改回.content-table
https://jsfiddle.net/vxavj8cv/2/