2

I need to fix the position of table used as a header while scrolling. I was trying to achieving the functionality of data table to be scrolled horizontally and vertically while it's data cells width remains constant. Now the issue is whenever I try to fix the position of table that I used for header it's not scrolling with horizontal scroll. I just want to fix the top header table while scrolling vertically but it should scroll horizontally.

This is the css I have used for it

table {
    line-height: 3;
    border-collapse: collapse;
    min-width: 100%;
    display: block;
}

table td span {
    white-space: normal;
    line-height: 1.2;
}

table th,
table td {
    padding: 0 10px !important;
    line-height: 1.2;
    min-width: 175px;
    max-width: 175px;
}

#table1 th:first-child {
    padding-left: 5px;
}

table th {
    background: #f9f9f9;
}

table .table-frame {
    height: 300px;
    overflow-y: scroll;
}

.scroll-table-holder {
    overflow-x: auto;
    white-space: nowrap;
    max-height: calc(100vh - 350px);
}

.text-left{
  text-align: left;
}

Here's the plunker with complete html and css. On this plunker it just need the table used for header to be fixed at top while scrolling vertically

Tauqeer H.
  • 781
  • 1
  • 9
  • 20
  • Possible duplicate of [Fixing an element to the top](https://stackoverflow.com/questions/5753273/fixing-an-element-to-the-top) – ASGM Jul 20 '17 at 15:10
  • I want to use only css for this problem. No Javascript or Jquery if possible – Tauqeer H. Jul 20 '17 at 15:16

2 Answers2

2

Best way is using javascript. You can find the answer here
But you still want use pure CSS. We need a bit walk around:

.scroll-container {
  width: 300px;
  height: 300px;
  border: solid 1px #000;
  overflow: auto;
}

.scroll-content {
  width: 500px;
  height: calc(100% - 50px);
  overflow-y: auto;
}

td {
  min-width: 100px;
  height: 50px;
}
 
<div class="scroll-container">
  <table>
    <tr>
      <td>Head1</td>
      <td>Head2</td>
      <td>Head3</td>
      <td>Head4</td>
      <td>Head5</td>
    </tr>
  </table>
  <div class="scroll-content">
    <table>
      <tr>
        <td>content1</td>
        <td>content2</td>
        <td>content3</td>
        <td>content4</td>
        <td>content5</td>
      </tr>
      <tr>
        <td>content1</td>
        <td>content2</td>
        <td>content3</td>
        <td>content4</td>
        <td>content5</td>
      </tr>
      <tr>
        <td>content1</td>
        <td>content2</td>
        <td>content3</td>
        <td>content4</td>
        <td>content5</td>
      </tr>
      <tr>
        <td>content1</td>
        <td>content2</td>
        <td>content3</td>
        <td>content4</td>
        <td>content5</td>
      </tr>
      <tr>
        <td>content1</td>
        <td>content2</td>
        <td>content3</td>
        <td>content4</td>
        <td>content5</td>
      </tr>
      <tr>
        <td>content1</td>
        <td>content2</td>
        <td>content3</td>
        <td>content4</td>
        <td>content5</td>
      </tr>
      <tr>
        <td>content1</td>
        <td>content2</td>
        <td>content3</td>
        <td>content4</td>
        <td>content5</td>
      </tr>
      <tr>
        <td>content1</td>
        <td>content2</td>
        <td>content3</td>
        <td>content4</td>
        <td>content5</td>
      </tr>
    </table>
  </div>

</div>
Duannx
  • 7,501
  • 1
  • 26
  • 59
0

I'm working on solving a similar issue for a datagrid component. I used flexbox to layout the headers and cells (as rows) and then wrapped things in scrollable panes for the desired access.

Check out this codepen to see it working. fyi - the codepen is actually trying to solve a different problem but it might give you some ideas for using flexbox for the layout and panes for the scrollable content.

SCSS

body {
    padding: 25px;
}

p {
    margin: 12px 0;
}

.datagrid-host {
    border: 1px solid;

    .datagrid-action-overflow {
        border-bottom: 1px solid;
    }

    .datagrid-viewport {
        display: flex;
        flex-direction: row;
        .datagrid-pinned-data {
            flex: 0 0 auto;
            width: 250px;
            border-right: 1px solid;
            display: flex;
            // display: none;
            flex-direction: column;
            height: 200px;
            .pinned-header {
                flex: 0 0 auto;
                background-color: #dcdcdc;
            }
            .pinned-data {
                flex: 1 1 auto;
                &.y-scrollable-pane {
                    flex: 1 1 auto;
                    position: relative;/* need this to position inner content */
                    overflow-y: auto;
                }
            }
        }

        .x-scrollable-pane {
            flex: 1 1 auto;
            display: flex;
            flex-direction: column;
            height: 200px; // sets the height of the datagrid
            overflow-x: auto;

            .datagrid-column-header {
                flex: 0 0 auto;
                background-color: #dcdcdc;
                width: 1900px; // must be same width as .page-content
            }

            .y-scrollable-pane {
                flex: 1 1 auto;
                position: relative;/* need this to position inner content */
                overflow-y: auto;
                width: 1900px; // must be same width as .page-header
            }
        }
    }

    .datagrid-footer {
        border-top: 1px solid;
    }
}

.datagrid-row {
    display: flex;

    .datagrid-cell {
        width: 10%;
    }
}

HTML

<div class="datagrid-host">
  <div class="datagrid-action-overflow">
    <button>Action 1</button>
    <button>Action 2</button>
    <button>Action 3</button>
    <button>Action 4</button></div>
  <div class="datagrid-viewport">
    <div class="datagrid-pinned-data">
        <div class="x-scrollable-pane"> <!-- if we do more than one column pinnible this width needs to be dynamic, and scrollable? -->
            <div class="datagrid-column-header">
              <div class="datagrid-row">
                  <div class="datagrid-cell">Column</div>
                  <div class="datagrid-cell">Column</div>
                  <div class="datagrid-cell">Column</div>
                  <div class="datagrid-cell">Column</div>
                  <div class="datagrid-cell">Column</div>
                  <div class="datagrid-cell">Column</div>
                  <div class="datagrid-cell">Column</div>
                  <div class="datagrid-cell">Column</div>
                  <div class="datagrid-cell">Column</div>
                  <div class="datagrid-cell">Column</div>
              </div>
            </div>
            <div class="y-scrollable-pane">
              <div class="datagrid-row">
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
              </div>
              <div class="datagrid-row">
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
              </div>
              <div class="datagrid-row">
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
              </div>
              <div class="datagrid-row">
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
              </div>
              <div class="datagrid-row">
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
              </div>
              <div class="datagrid-row">
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
              </div>
              <div class="datagrid-row">
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
              </div>
              <div class="datagrid-row">
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
              </div>
              <div class="datagrid-row">
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
              </div>
              <div class="datagrid-row">
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
              </div>
              <div class="datagrid-row">
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
              </div>
              <div class="datagrid-row">
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
              </div>
              <div class="datagrid-row">
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
              </div>
              <div class="datagrid-row">
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
              </div>
              <div class="datagrid-row">
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
              </div>
              <div class="datagrid-row">
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
              </div>
              <div class="datagrid-row">
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
              </div>
              <div class="datagrid-row">
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
              </div>
              <div class="datagrid-row">
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
              </div>
            </div>
          </div>
        </div>
    <div class="x-scrollable-pane">
      <div class="datagrid-column-header">
          <div class="datagrid-row">
            <div class="datagrid-cell">Column</div>
            <div class="datagrid-cell">Column</div>
            <div class="datagrid-cell">Column</div>
            <div class="datagrid-cell">Column</div>
            <div class="datagrid-cell">Column</div>
            <div class="datagrid-cell">Column</div>
            <div class="datagrid-cell">Column</div>
            <div class="datagrid-cell">Column</div>
            <div class="datagrid-cell">Column</div>
            <div class="datagrid-cell">Column</div>
        </div>
        </div>
        <div class="y-scrollable-pane">
          <div class="datagrid-row">
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
          </div>
          <div class="datagrid-row">
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
          </div>
          <div class="datagrid-row">
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
          </div>
          <div class="datagrid-row">
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
          </div>
          <div class="datagrid-row">
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
          </div>
          <div class="datagrid-row">
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
          </div>
          <div class="datagrid-row">
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
          </div>
          <div class="datagrid-row">
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
          </div>
          <div class="datagrid-row">
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
          </div>
          <div class="datagrid-row">
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
          </div>
          <div class="datagrid-row">
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
          </div>
          <div class="datagrid-row">
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
          </div>
          <div class="datagrid-row">
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
          </div>
          <div class="datagrid-row">
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
          </div>
          <div class="datagrid-row">
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
          </div>
          <div class="datagrid-row">
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
          </div>
          <div class="datagrid-row">
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
          </div>
          <div class="datagrid-row">
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
          </div>
          <div class="datagrid-row">
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
          </div>
        </div>
      </div></div>
  <div class="datagrid-footer">Footer</div>
</div>
hippeelee
  • 1,788
  • 1
  • 10
  • 21