Table body width relative to table head

Question

I am using Trinidad JSF framework and trying to build a fixed header and scrolling tbody table. I could achieve this, but the tbody columns were not as width of thead, when there is no data for most of the columns in table body. Please see below.

Code snippet.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
.af_table_content {

 border-spacing: 1;
 border: 1px solid black;
}

.af_table_content tbody, .af_table_content thead {
 display: block; 
}
.af_table_content tbody tr {
table-layout:fixed;
}
.af_table_content thead tr th {
 height: 30px;
 line-height: 30px;
 /* text-align: left; */
}

.af_table_content tbody {
 height: 100px;
 overflow-y: auto;
 overflow-x: hidden;
 border-top: 1px solid black;  
}

.af_table_content tbody td,.af_table_content thead th { 
 border-right: 1px solid black;
 /* white-space: nowrap; */
}

.af_table_content tbody td:last-child,.af_table_content thead th:last-child
 {
 border-right: none;
}
</style>
</HEAD>

<BODY>
<table class="af_table_content" cellpadding="1" cellspacing="0"
 border="0" width="100%">
 <thead>
 <tr>
  <th scope="col" ><span
   >Column 1</span></th>
  <th scope="col" ><span
   >Column 2</span></th>
  <th scope="col" ><span
   >Column 3</span></th>
  <th scope="col" ><span
   >Column 4</span></th>
  <th scope="col" ><span
   >Column 5</span></th>
  <th scope="col" ><span
   >Column 6</span></th>
  <th scope="col" ><span
   >Column 7</span></th>
  <th scope="col" ><span
   >Column 8</span></th>
  <th scope="col" ><span
   >Column 9</span></th>
  <th scope="col" ><span
   >Column 10</span></th>
  <th scope="col" ><span
   >Column 11</span></th>
 </tr>
 </thead>
 <tbody>
 <tr>
  <td ><span
   >value</span></td>
  <td ><span
   >1</span></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td >    
 </tr>
 <tr>
  <td ><span
   >value</span></td>
  <td ><span
   >1</span></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
 </tr>
 <tr>
  <td ><span
   >value</span></td>
  <td ><span
   >1</span></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
 </tr>
 <tr>
  <td ><span
   >value</span></td>
  <td ><span
   >1</span></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
 </tr>
 <tr>
  <td ><span
   >value</span></td>
  <td ><span
   >1</span></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
 </tr>
 <tr>
  <td ><span
   >value</span></td>
  <td ><span
   >1</span></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
 </tr>
 <tr>
  <td ><span
   >value</span></td>
  <td ><span
   >1</span></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
 </tr>
 <tr>
  <td ><span
   >value</span></td>
  <td ><span
   >1</span></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
 </tr>
 <tr>
  <td ><span
   >value</span></td>
  <td ><span
   >1</span></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
 </tr>
 <tr>
  <td ><span
   >value</span></td>
  <td ><span
   >1</span></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
 </tr>
 <tr>
  <td ><span
   >value</span></td>
  <td ><span
   >1</span></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
 </tr>
 <tr>
  <td ><span
   >value</span></td>
  <td ><span
   >1</span></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
 </tr>
 

 </tbody>
 </table>
</BODY>
</HTML>

yes just now. it extends the table to the whole page width and remains the same. — Pat, Jun 14 '16 at 16:34
With your html and your css I can't duplicate the issue, not even if I put them together in one snippet. — Mr Lister, Jun 14 '16 at 19:33
@MrLister I have edited the code snippet in my original question. To replciate the issue, please open in chrome. — Pat, Jun 14 '16 at 20:14
I see what you're trying to do now, but that trick requires some extra javascript to restore the cell widths. — Mr Lister, Jun 14 '16 at 20:44
@MrLister i should have said you this, i use trinidad jsf framework and their component tag tr:table generates table with all header and data under tag instead of header in and content in . So i wrote this query in run time to aligning them in runtime. `var $table = $("table.af_table_content"); $table.find('tbody tr:first').wrap('').parent() .prependTo($table);` Does this made any issues in alignment? Also this table scroll is not working in IE, not sure what is going wrong in IE. — Pat, Jun 14 '16 at 20:54

Table body width relative to table head

0 Answers0