如何修复表头左侧部分和右侧部分仅滚动中间部分

时间:2013-03-19 11:31:23

标签: jquery css html-table

我正在搜索结果,但我没有找到任何结果。

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

  1. 是如何修复标题(粗体文字区域)

  2. 如何修复左侧部分(1种文本区域)

  3. 如何修正右侧部分(7种文字)

  4. 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>
    

    的CSS

    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    .m-m{
    width:200px;
    height:200px;
    margin:0 auto;
    overflow:scroll;
    }
    .demo-table{
    border:solid 1px red;
    width:100%;
    
    }
    .demo-table tr:first-child td{
    font-weight:bold;
    }
    
    .demo-table tr td{
    border:solid 2px green;
    padding:5px;
    }
    

    我想结果这个

    enter image description here

1 个答案:

答案 0 :(得分:0)

好的,图片更好地解释了您想要做的事情。如果您能够在表格的标题和正文上设置固定宽度,则可以将它们分开。

我在这里放置了一个可能有用的jsFiddle http://jsfiddle.net/3Lxj3/1/

<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>

CSS:

#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;
}

基本上,您将标题和主体分开,但要确保它们垂直对齐。它不漂亮,但它有效。