Jquery 如何修复表格标题左侧部分和右侧部分仅滚动中间部分

我正在搜索结果，但未找到任何结果

我想要一张简单的桌子， 现在我有三个问题：

是如何固定标题的名称（粗体文本区域）

如何固定左侧部分（1类文本区域）

如何固定右侧部分（7种文本类型）

HTML

<div class="m-m">
<table class="demo-table">
    <tr>
        <td>fixed area</td>
        <td>fixed area</td>
        <td>fixed area</td>
        <td>fixed area</td>
        <td>fixed area</td>
        <td>fixed area</td>
        <td>fixed area</td>
    </tr>
    <tr>
        <td>fixed area</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>fixed area</td>
    </tr>
    <tr>
        <td>fixed area</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>fixed area</td>
    </tr><tr>
        <td>fixed area</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>fixed area</td>
    </tr><tr>
        <td>fixed area</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>fixed area</td>
    </tr><tr>
        <td>fixed area</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>fixed area</td>
    </tr><tr>
        <td>fixed area</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>fixed area</td>
    </tr><tr>
        <td>fixed area</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>fixed area</td>
    </tr><tr>
        <td>fixed area</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>fixed area</td>
    </tr><tr>
        <td>fixed area</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>fixed area</td>
    </tr>

</table>
</div>

我想得到这个结果

---

好的，这张图更好地解释了你想做什么。如果能够在表头和表体上设置固定宽度，则可以将它们分开

我在这里放置了一个JSFIDLE，这可能会有所帮助

<div id="header">
     <div style="width:40%;">header 1</div>
     <div style="width:30%;">header 2</div>
     <div style="width:30%;">header 3</div>
    <div style="clear:both"></div>
</div>
    <div style="clear:both"></div>
<div id="left">
    <div>row 1</div>
    <div>row 2</div>
    <div>row 3</div>
    <div>row 4</div>
</div>
<div id="body">
     <table>
     <tr>
     <td style="width:40%;">contents 1</td>
     <td style="width:30%;">contents 2</td>
     <td style="width:30%;">contents 3</td>
     </tr>
    <tr>
     <td style="width:40%;">contents 1</td>
     <td style="width:30%;">contents 2</td>
     <td style="width:30%;">contents 3</td>
     </tr>
    <tr>
     <td style="width:40%;">contents 1</td>
     <td style="width:30%;">contents 2</td>
     <td style="width:30%;">contents 3</td>
     </tr>
    <tr>
     <td style="width:40%;">contents 1</td>
     <td style="width:30%;">contents 2</td>
     <td style="width:30%;">contents 3</td>
     </tr>
    </table>
</div>
<div id="right">
    <div>check 1</div>
    <div>check 2</div>
    <div>check 3</div>
    <div>check 4</div>
</div>

---

基本上，可以将收割台和主体分开放置，但要确保它们垂直对齐。这并不漂亮，但很管用。

我怀疑你能以任何优雅的方式做到这一点。如果此标记用于布局，则无论如何都不应使用。如果你能详细说明你的用例（什么是内容/上下文，为什么你想修复其中的一部分），那么建议替代方案就会更容易。@xec我知道位置固定，但这是表格数据，所以我需要在表格中………不是为了油嘴滑舌，而是“我必须使用表格”的回答会导致“我必须看其他人的问题”很快-限制可能的选项意味着在很多情况下没有选项。祝你好运。@markschultheis我需要这个解决方案，现在我使用table和client，当我滚动页面时，表头、表左部分、表右部分固定，中间部分只会改变……只要它看起来像一个表，就像一个表，他们真的关心标记是否是一个表吗？这对我来说不起作用-如果我添加足够的行使其实际滚动，那么行标题将继续沿着页面向下，而数据行仅限于滚动框。如果您有足够的标题向右滚动，则相同。当然，当这种情况发生时，如果你滚动数据，标题就不会随之滚动。@Adrian:那是因为它不应该滚动。Rohit Azad写道，他希望固定水平和垂直标题，以及右侧的复选框。我想这不是我解决这个问题的方式…：-）根据OP发布的截图，这似乎不是他想要的。

<div id="header">
     <div style="width:40%;">header 1</div>
     <div style="width:30%;">header 2</div>
     <div style="width:30%;">header 3</div>
    <div style="clear:both"></div>
</div>
    <div style="clear:both"></div>
<div id="left">
    <div>row 1</div>
    <div>row 2</div>
    <div>row 3</div>
    <div>row 4</div>
</div>
<div id="body">
     <table>
     <tr>
     <td style="width:40%;">contents 1</td>
     <td style="width:30%;">contents 2</td>
     <td style="width:30%;">contents 3</td>
     </tr>
    <tr>
     <td style="width:40%;">contents 1</td>
     <td style="width:30%;">contents 2</td>
     <td style="width:30%;">contents 3</td>
     </tr>
    <tr>
     <td style="width:40%;">contents 1</td>
     <td style="width:30%;">contents 2</td>
     <td style="width:30%;">contents 3</td>
     </tr>
    <tr>
     <td style="width:40%;">contents 1</td>
     <td style="width:30%;">contents 2</td>
     <td style="width:30%;">contents 3</td>
     </tr>
    </table>
</div>
<div id="right">
    <div>check 1</div>
    <div>check 2</div>
    <div>check 3</div>
    <div>check 4</div>
</div>

#body table {
width:100%;
}
#header, #left, #body table {
    border:1px solid #ccc;
}
table tr td {
    height:50px;
}
#header {
    margin-left:20%;
    margin-right:20%;
    width:59%;
}
#header div {
    float:left;
}
#body {
    width:59%;
    float:left;
    overflow:scroll;
    height:200px;
}
#left {
    float:left;
    width:20%;
    height:200px;
}
#left div {
    height:50px;
}
#right {
    float:left;
    width:20%;
    height:200px;
}
#right div {
    height:50px;
}