SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    <thead> and <th> not matching table width

    If you look at all of my `<th>` tags in the `<thead>` tag in the table, you can see if each <th> has its own class: col1, col2, col3, col4... col9 I also have a `<thead>` in the table.

    Now everything in the css is fine for the table except for my table headings. The problem is that I have a scrolling table, because I have a scrolling table I don't want my table headings to scroll with the table. Because of that I need this #tableWrapper thead tr, the problem though with this is the width of the thead and the width of the table headings (th), they are not going as wide as the whole table (99%), it is going approximately about 60% of the way, now if I didn't have a thead I will be able to get the table headings to its correct size and go as wide as the table, but this means the table headings will scroll with the table so I need the thead. But the problem is that the `<thead> and <th>` is not going as wide as table, why is this.


    Below is table code:

    Code:
     <div id="tableWrapper">
      	<div id="tableScroll">
        <table id="qandatbl" align="center">
        <thead>
        <tr>
        <th class="col1">Question No</th>
        <th class="col2">Question</th>
        <th class="col3">Option Type</th>
        <th class="col4">Duration</th>
        <th class="col5">Weight(%)</th>
        <th class="col6">Answer</th>
        <th class="col7">Video</th>
        <th class="col8">Audio</th>
        <th class="col9">Image</th>
        </tr>
        </thead>
        <tbody>
    	<tr>
        <td class="qid"><?php echo $i; ?></td>
        <td class="question"></td>
        <td class="options"></td>
        <td class="duration"></td>
        <td class="weight"></td>
        <td class="answer"></td>
        <td class="video"></td>
        <td class="audio"></td>
        <td class="image"></td>
    	</tr>
    	</tbody>
    </table>
    </div>
    </div>
    Below is css;

    Code:
    	/*css for QandATable.php*/
        	
                  	#qandatbl{ //table
        	          	font-size:14px;
        	          	border-collapse:collapse;
        	          	text-align:center;
        	          	margin-left:auto; 
            			margin-right:auto;
            			width:99%;
                  	}
                  	.col1{
        	        background-color:#FEFEF2;
        	        width:7%;
        	        border: 1px solid black;
                  	}
                  	.col2{
        	        background-color:#FCF6CF;
        	     	width:16%;
        	        border: 1px solid black; 	
                  	}	
                  	.col3{
        	        background-color:#FEFEF2; 
        		width:7%;
        	        border: 1px solid black;
                  	}
                  	.col4{
        	        background-color:#FCF6CF;
         		width:7%;
        	        border: 1px solid black;
                  	}
        
        	       .col5{
        	        background-color:#FEFEF2;
        	        width:7%;
        	        border: 1px solid black;
                  	}
                  	.col6{
        	        background-color:#FCF6CF;
        	     	width:7%;
        	        border: 1px solid black; 	
                  	}	
                  	.col7{
        	        background-color:#FEFEF2; 
        		width:16%;
        	        border: 1px solid black;
                  	}
                  	.col8{
        	        background-color:#FCF6CF;
         		width:16%;
        	        border: 1px solid black;
                  	}
                        .col9{
        	        background-color:#FCF6CF;
         		width:16%;
        	        border: 1px solid black;
                  	}
                  	
        #tableWrapper {
          position:relative;
        }
        #tableScroll {
          height:300px;
          overflow:auto;  
          margin-top:20px;
        }
        
        #tableWrapper thead {
        position:absolute;
        top:-24px;
        width:99%;
        }`enter code here`

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,466
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Its because you have removed the thead from the flow so it no longer takes part in that table and won't react to the table width.

    That's the problem with this method and you can't really do much with the removed content. I have a few old demos where I explored this before but had to settle for a full width background colour. The cells were kept at the right width by using a tfoot element to created the correct widths and then absolutely placing the inner content and not the thead.

    http://www.pmob.co.uk/temp/scroll-ta...adfoot-100.htm
    http://www.pmob.co.uk/temp/table-fix...er-example.htm

    We actually had a quiz on this a couple of years ago so you may be interested to see how much thought has gone into this:


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •