在每个td / box中，如何使它固定在每个box中的标题与下方可滚动的div之间？

Question

I have 9 boxes, I want each box to have a "heading", and scrollable content beneath the "Box n" heading.

Am looking for 1) Ensure the "header" is vertically aligned to the top of each box. 2) The scrollable content takes up the max height of each box.

How do I do this? My HTML is the following:

 html, body { width: 100%; height: 100%; } table { border: 1; width: 100%; height: 100%; } td { text-align: center; background: red; } div { overflow: auto; height: 100%; background: yellow; } 

 <table> <tr> <td> <div> Box1<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br>Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> </div> </td> <td> <div>Box2</div> <div> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br>Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> </div> </td> <td> <div> Box3<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br>Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> </div> </td> </tr> <tr> <td>Box4</td> <td>Box5</td> <td>Box6</td> </tr> <tr> <td>Box7</td> <td>Box8</td> <td>Box9</td> </tr> </table> 

The fiddle I have is here: https://jsfiddle.net/ba5qxzmo/

Box 1 is bad, because the Box1 header text is not "fixed at the top of the box and scrolls with the content. Box 2 is my attempt at creating a fixed header, but it messes up the look of the box entirely. Box 3 and the rest of the boxes also do not have a fixed header.

How can I make it such that each box has a "fixed" header? (Box1, Box2, Box3), with scrollable content (overflow) beneath each of them?

Answer 1

Just add your whole content of a cell except heading in a div and make the div as scrollable using max-height and overflow-y:scroll and set the height of td , heading and content so that everything will align properly.

 html,body { width:100%; height:100%; } table { border:1; width:100%; height:100%; } td { text-align:center; background:red; padding: 10px 0; } .scroll { overflow-y: auto; height: 100%; background:yellow; } .heading{ height:20px; } 

 <table> <tr> <td> <span class="heading">Box1</span> <div class="scroll"> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br>Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> </div> </td> <td> <span class="heading">Box1</span> <div class="scroll"> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br>Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> </div> </td> <td> <span class="heading">Box1</span> <div class="scroll">Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> </div> </td> </tr> <tr> <td>Box4</td> <td>Box5</td> <td>Box6</td> </tr> <tr> <td>Box7</td> <td>Box8</td> <td>Box9</td> </tr> </table> 

Answer 2

Take heading on one div and the content in another div, and make the first div position fixed. and give the second div propperty overflow: scroll; Some text Some text

     .heading{
        position:fixed;
      }

     .content{
        overflow:scroll;
      }

Answer 3

like this:

    <div class="fixed_parent">
        <div class="fixed">
            Some Heading
        </div>
    </div>
    <div class="content">
            Some content
    </div>

 .fixed_parent{
    height:100px; (or if it's depends on height of fixed div and it can changes you can right overflow:hidden; without writhing about height)
  }

 .heading{
    position:fixed;
  }

 .content{
    overflow:scroll;
  }