Menu ▾ ▴

static header and tbody style class

Help
surya
2007-01-16
2012-10-09

  • surya

    surya - 2007-01-16

    I want to make the table header static, where it will not scroll along with the rest of the body.

    The example link provided in the FAQ http://www.imaputz.com/cssStuff/bigFourVersion.html is for a normal HTML table.
    It requires a style class to be set for tbody tag. How do I do this with out any additional java script?
    Or is using java script is the only way to go?

    Thanks

     

    • surya

      surya - 2007-01-23

      The following CSS (optimized the CSS provided by Randy) helped me to get the static header with the display table.

      Thanks a lot Randy.

      CSS

      table.staticheader {
      text-decoration: none;
      border: 1px solid #CCC;
      width: 98%;
      }

      table.staticheader th {
      padding: 3px 3px 3px 3px !important;
      text-align:center;
      }

      table.staticheader td {
      padding: 3px 3px 3px 3px !important;
      }

      table.staticheader thead tr {
      position: relative;
      height: 10px;
      background-color: #D7E5F3;
      }

      table.staticheader tbody {
      height:150px;
      overflow-x:hidden;
      overflow-y: auto;
      overflow:scroll;
      }

      table.staticheader tbody tr {
      height: auto;
      white-space: nowrap;
      }

      table.staticheader tbody tr.odd {
      background-color: #eee
      }

      table.staticheader tbody tr.tableRowEven,tr.even {
      background-color: #ddd
      }

      table.staticheader tbody tr td:last-child {
      padding-right: 20px;
      }

      table.staticheader tbody td {
      padding: 2px 4px 2px 4px !important;

      }

      div.TableContainer {
      height: 150px;
      overflow-x:hidden;
      overflow-y:auto;
      }

      JSP

      <table width="100%" border="0">
    <tr>
        <td>
            <div class="TableContainer">
                <display:table cellpadding="5" cellspacing="1" name="myList"
                    class="staticheader">
                    <display:setProperty name="basic.empty.showtable" value="true" />
                    <display:column property="id" title="ID" />
                    <display:column property="type" title="type" />
                    <display:column property="name" title="Name" />
                    <display:column property="dueDate" title="Due date" />
                    <display:column property="details" title="Details" style="text-align:center"/>
                </display:table>
            </div>
        </td>
    </tr>
</table>
       

      • wecansolveit.org

        wecansolveit.org - 2008-04-18

        .displayTableFrame {
        background-color: white;
        overflow-x: scroll;
        height: 320px;
        width: 100%;
        }

        .dataTable {
        text-decoration: none;
        border: 1px solid #CCC;
        width: 100%;
        }

        .dataTable th {
        padding: 1px 2px 1px 2px !important;
        text-align: center;
        border-spacing: 0px;
        }

        .dataTable td {
        padding: 1px 2px 1px 2px !important;
        }

        .dataTable thead tr {
        position: relative;
        height: 10px;
        background-color: #D7E5F3;
        }

        .dataTable tbody {
        height: 230px;
        overflow-x: hidden;
        }

        .dataTable tbody tr {
        width: inherit;
        height: auto;
        white-space: nowrap;
        height: auto;
        }

        .dataTable tbody tr.odd {
        background-color: #eee
        }

        .dataTable tbody tr.tableRowEven,tr.even {
        background-color: #ddd
        }

        .dataTable tbody tr td:last-child {
        padding-right: 1px;
        }

        .dataTable tbody td {
        padding: 1px 2px 1px 2px !important;
        }

        .dataTable .order1 {
        background-position: right 50%;
        background-image: url('../Images/arrow_up.gif');
        background-repeat: no-repeat
        }

        .dataTable .order2 {
        background-position: right 50%;
        background-image: url('../Images/arrow_down.gif');
        background-repeat: no-repeat
        }

        Although not sure at all how you guys were able to pass this in Internet Explorer. Here's a little more on non-IE browsers.

        The above CSS fixes two issues:
        1.) Issue when table goes beyond page width?
        I extended the css a little beyond by creating a frame (see displayTableFrame above) as the table width often goes beyond the page width. This does an ok job however, there are many issues that the frame does not work in Internet Explorer at all.
        .displayTableFrame {
        background-color: white;
        overflow-x: scroll;
        height: 320px;
        width: 100%;
        }
        As again I have no clue how we can control the height based on all other data in a page so that it fits exactly in the single page. I am working on fixing the CSS to get the height automatically adjusted soon. Currently the height is based on the actual display table height which is also fixed as you can see in the .dataTable CSS

        2.) The vertical scroll bar appearing on the right hand side of the display table creates a horizontal scroll bar in the bottom in all browsers.
        .dataTable tbody {
        height: 230px;
        overflow-x: hidden;
        }
        The overflow-x:hidden removes that ugly horizontal scrollbar. The frame in itself gets you a horizontal scrollbar only when the table goes beyond the page width. All of this was tested in FireFox.

        A quick tip add an extra column at the end of all columns to move the vertical scrollbar a little further to the right as you can see the scrollbar hiding/overlapping some of the text of the last column.
        <display:column title=""> &nbsp; &nbsp;
        </display:column>

        Having been said this. I am still stuck with getting this working in IE. I need some good help/input on the frame can also be fixed in Internet Explorer as well.

        Appreciate any suggests/comments to make this work in IE.

        -Cheers
        Krishna

         

    • Tinu V Thomas

      Tinu V Thomas - 2007-02-06

      Hi Surya,

      I have used the same styles that you have given. But still my header of the table is moving over. Following is part of jsp page

      <table width="100%" border="0">
      <tr>
      <td>

              &lt;div class=&quot;TableContainer&quot;&gt;&lt;display:table 
            name=&quot;data&quot; cellpadding=&quot;5&quot; cellspacing=&quot;1&quot;
            pagesize=&quot;${data.objectsPerPage}&quot;
            defaultorder=&quot;${data.sortDirection}&quot; class=&quot;staticheader&quot;&gt;
            &lt;display:column property=&quot;${order.firstColumn}&quot;
                title=&quot;${order.firstColumn}&quot; sortable=&quot;true&quot;&gt;
            &lt;/display:column&gt;
            &lt;display:column property=&quot;${order.secondColumn}&quot;
                title=&quot;${order.secondColumn}&quot; sortable=&quot;true&quot;&gt;
            &lt;/display:column&gt;
        &lt;/display:table&gt;&lt;/div&gt;

        &lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;

      Also I have created seperate css file and I have added in the jsp using <link>.

      Could you help me to correct my code?

      thanks,
      Tinu

       

      • Alex Manoylenko

        Alex Manoylenko - 2007-03-21

        Hello Surya,

        Thanks for example you've provided but
        I still get the same problems as posted by Tinu.

        Best regards,
        Alex

         

Log in to post a comment.

MongoDB Logo MongoDB