Show Scrollbar only in table body

Discussion in 'CSS' started by kalyansundar, Feb 9, 2007.

0
  1. #1
    HI,
    I have a table with table header and body. the table is inside a container. I would like to use scrollbar only for the table body section.But also the table header should scroll accoring with the horizontal bar in table body. Is there any way to link the horizontal scrollbar in table body with the header?? without showing a scrollbar for the header???
    It would be helpful if anyone comes up with a property/way ..
    Thanks
     
    kalyansundar, Feb 9, 2007 IP
  2. ajsa52

    ajsa52 Well-Known Member

    Messages:
    3,426
    Likes Received:
    125
    Best Answers:
    0
    Trophy Points:
    160
    #2
    Why not using two tables ?
    - First for heading title with no scrollbar.
    - Second with all rows with scrollbar
     
    ajsa52, Feb 9, 2007 IP
  3. jared

    jared Peon

    Messages:
    231
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #3
    you are going to have to either show me a diagram or some code because I'm a little confused :eek:
     
    jared, Feb 9, 2007 IP
  4. ajsa52

    ajsa52 Well-Known Member

    Messages:
    3,426
    Likes Received:
    125
    Best Answers:
    0
    Trophy Points:
    160
    #4
    Ok, I've made a HTML working example for you:

    
<html>
<head>

<style type="text/css">

.tablaBorder
{
  border-collapse: separate;
  border: solid Black 1px;
  border-spacing: 1px 1px; /* Horiz, Vert */
  background-color: Lightgrey; 
}

.col1 { width:  80px; text-align:left; }
.col2 { width: 120px; text-align:center; }
.col3 { width:  50px; text-align:right; }

.resumen { table-layout:fixed; }
.resumen th { font-size:11px; background-color: Silver; }

.todo { overflow:auto; height:100px; }
.detalle { table-layout:fixed; }
.row0 { background-color: #E7E7E7; }
.row1 { background-color: Lightgrey; }

</style>

</head>
<body>


  <table class="tablaBorder">
  
    <!-- HEADING -->
    <tr><td colspan="15"><table class="resumen">
      <col class="col1"/>
      <col class="col2"/>
      <col class="col3"/>
      <tr> <!-- linea de cabecera -->
        <th class="col1">COLUMN 1</th>
        <th class="col2">COLUMN NUMBER 2</th>
        <th class="col3">C 3</th>
      </tr>
    </table></td></tr>  
    
    <!-- ROWS -->
    <tr><td colspan="15"><div class="todo"><table class="detalle">
      <col class="col1"/>
      <col class="col2"/>
      <col class="col3"/>
      <tr class="row0"><td class="col1">val01</td><td class="col2">value02</td><td class="col3">v03</td></tr>
      <tr class="row1"><td class="col1">val11</td><td class="col2">value12</td><td class="col3">v13</td></tr>
      <tr class="row0"><td class="col1">val21</td><td class="col2">value22</td><td class="col3">v23</td></tr>
      <tr class="row1"><td class="col1">val31</td><td class="col2">value32</td><td class="col3">v33</td></tr>
      <tr class="row0"><td class="col1">val41</td><td class="col2">value42</td><td class="col3">v43</td></tr>
      <tr class="row1"><td class="col1">val51</td><td class="col2">value52</td><td class="col3">v53</td></tr>
      <tr class="row0"><td class="col1">val61</td><td class="col2">value62</td><td class="col3">v63</td></tr>
      <tr class="row1"><td class="col1">val71</td><td class="col2">value72</td><td class="col3">v73</td></tr>
      <tr class="row0"><td class="col1">val81</td><td class="col2">value82</td><td class="col3">v83</td></tr>
       <tr class="row1"><td class="col1">val91</td><td class="col2">value92</td><td class="col3">v93</td></tr>
    </table></div></td></tr>  
  
  </table>

</body>
</html>
    Code (markup):
    Some reputation would be nice. ;)
     
    ajsa52, Feb 9, 2007 IP