如何修复<；部门>；在css中的特定位置

我有三个表，第一个表边距顶部是50px，第二个表有变化行，这取决于文本，但我想固定的第三个表边距顶部是：150px标准

但第三个表无法将其固定在页边距顶部：150px，因为第二个表有行的变化

如何将第三个表格固定在页边空白顶部：150px，即使第二个表格有变化行

例如：

表1
姓名：巴拉克里希南
表2

美国无详细信息金额

1张200号桌

表3
总数：200

我想固定表3的恒定位置，即使表2的行数增加了

!

---

请点击上面的链接查看我的图片

我不确定你想用中间的那个盒子做什么。意思是你想让它随页面调整，还是当它获取太多信息时滚动。听起来像是你想要一个页脚样式的框，它在整个页面中都保持在相同的位置。查看此操作指南网站并按照页脚说明操作

这将有助于您了解第三个箱子将如何保持在“固定位置”

---

如果我理解您的要求，最好的解决方案如下：

将所有表格包装在

div中

给中间的

div

一个固定高度和

overflow:auto

---

HTML

：

<div>
    <table>
        <tr>
            <th>Name</th>
            <td>Balakrishnan</td>
            <td>Age</td>
            <td>25</td>
        </tr>
    </table>
</div>
<div class="fixed">
    <table>
        <tr>
            <th>S.No</th>
            <th>Particulars</th>
            <th>Quantity</th>
            <th>Amount</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Item1</td>
            <td>1</td>
            <td>50</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Item2</td>
            <td>1</td>
            <td>50</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Item3</td>
            <td>1</td>
            <td>50</td>
        </tr>
    </table>
</div>
<div>
    <table>
        <tr>
            <th>Total:</th>
            <td>250</td>
        </tr>
    </table>
</div>

例如：

更多行示例：

---

欢迎来到SO<代码>：）您已经尝试了什么？你能把你的密码寄出去吗？你能发布一张预期与实际行为的截图吗？Thanksimage posted请检查这应该是一个评论-回答不是为了询问更多信息。“你必须有50个声誉才能发表评论”，这就是为什么我以这种方式发布它。

<div>
    <table>
        <tr>
            <th>Name</th>
            <td>Balakrishnan</td>
            <td>Age</td>
            <td>25</td>
        </tr>
    </table>
</div>
<div class="fixed">
    <table>
        <tr>
            <th>S.No</th>
            <th>Particulars</th>
            <th>Quantity</th>
            <th>Amount</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Item1</td>
            <td>1</td>
            <td>50</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Item2</td>
            <td>1</td>
            <td>50</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Item3</td>
            <td>1</td>
            <td>50</td>
        </tr>
    </table>
</div>
<div>
    <table>
        <tr>
            <th>Total:</th>
            <td>250</td>
        </tr>
    </table>
</div>

.fixed {
    height: 150px;
    overflow-y:auto;
    margin: 20px 0 ;
}