Jump to content
Greywacke

scrolling tbody for a dynamic table - how do i get the width to follow that of the thead element?

Recommended Posts

hi there, i have implemented a scrolling tbody for a css loaded dynamic table. the results i have saved - can be viewed at http://www.performatix.co/Customer%20Counts.htm, but what descriptors need to be added to the css to stretch the scrollable tbody as wide as the thead? (100%)

 

the css used sofar is as follows:

/* define height and width of scrollable area. Add 16px to width for scrollbar          *//* allow WinIE to scale 100% width of browser by not defining a width                   *//* WARNING: applying a background here may cause problems with scrolling in WinIE 5.x   */div.tableContainer {	clear: both;	border: 1px outset #808080;	height: 500px;	overflow: auto;	width: 100%;}html div.tableContainer/* */ {	padding: 0 16px 0 0;	width: 100%;}html>body div.tableContainer {	height: 467px;	padding: 0;}head:first-child+body div[class].tableContainer {	width: 97%;	height: 467px;	overflow: hidden;}div.tableContainer table {	float: left;	width: 100%}html div.tableContainer table/* */ {	margin: 0 -16px 0 0;}html>body div.tableContainer table {	float: none;	margin: 0;	width: 100%;}head:first-child+body div[class].tableContainer table {	width: 100%;}thead.fixedHeader tr {	position: relative;	width: 100%;	top: expression(document.getElementById("tableContainer").scrollTop);}                                              */head:first-child+body thead[class].fixedHeader tr {	display: block;	width: 100%;}thead.fixedHeader th {	background: #d8d8d8;	font-weight: normal;	padding: 4px 3px;	text-align: left;}head:first-child+body tbody[class].scrollContent {	display: block;	width: 100%;	height: 400px;	overflow: auto;}tbody.scrollContent td, tbody.scrollContent tr.normalRow td {	background-color: #f8f8f8;	border-bottom: none;	border-left: none;	border-right: 1px solid #d8d8d8;	border-top: none;	padding: 2px 3px 2px 3px;}tbody.scrollContent tr.normalRow td + td + td + td + td + td {	background-color: #f8f8f8;	border-bottom: none;	border-left: none;	border-right: none;	border-top: none;	padding: 2px 3px 2px 3px;}tbody.scrollContent tr.alternateRow td {	background-color: #d8d8d8;	border-bottom: none;	border-left: none;	border-right: 1px solid #f8f8f8;	border-top: none;	padding: 2px 3px 2px 3px;}tbody.scrollContent tr.alternateRow td + td + td + td + td + td {	background-color: #d8d8d8;	border-bottom: none;	border-left: none;	border-right: none;	border-top: none;	padding: 2px 3px 2px 3px;}head:first-child+body thead[class].fixedHeader th {	border-right: none;	padding: 2px 4px 2px 4px;}head:first-child+body thead[class].fixedHeader th[title=EXECUTE], head:first-child+body thead[class].fixedHeader th[title=RESET] {	width: 50%;};head:first-child+body tbody[class].scrollContent td {	border-right: none;	padding: 2px 4px 2px 4px;}#form_services thead.fixedHead {	margin-top: 2px;	margin-bottom: 2px;	width: 100%;}#form_services tbody.scrollContent {	width: 100%;	height: 350px;	overflow-y: scroll;	background: #d8d8d8;}#form_transactions input[type="button"]#button_preview, #form_transactions input[type="button"]#button_sendcontact, #form_transactions input[type="button"]#button_sendaccmgr, #form_transactions input[type="button"]#button_sendsvcmgr, #form_transactions input[type="button"]#button_refresh {	width: 19.22%;}#form_services input[type="button"]#title_service, #form_services input[type="button"]#title_country, #form_services input[type="button"]#title_region, #form_services input[type="button"]#title_supplier, #form_services input[type="button"]#title_status, #form_services input[type="button"]#title_primattval, #form_services input[type="button"]#group_service, #form_services input[type="button"]#group_country, #form_services input[type="button"]#group_region, #form_services input[type="button"]#group_supplier, #form_services input[type="button"]#group_status, #form_services input[type="button"]#group_primattval, #form_services input[type="button"]#execute_query, #form_services input[type="button"]#reset_query  {	width: 100%;}#form_services select#where_service, #form_services select#where_country, #form_services select#where_region, #form_services select#where_supplier, #form_services select#where_status, #form_services select#where_primattval  {	width: 98%;	margin-top: 1px;	margin-left: 1%;}

the html is an excerpt of the dhtml populated mysql table from a select. my last two posts (one and more accurately two) were on this functionality. this is highly important to resolve, got lots of other php work to do! -_-

Edited by Pierre 'Greywacke' du Toit

Share this post


Link to post
Share on other sites

You have two stray closing divs, and the only way i can get it to 100% is remove display; block; from in FF that is.

 

head:first-child + body tbody.scrollContent[class] {
display: block;
}

Share this post


Link to post
Share on other sites

 

 

You have two stray closing divs, and the only way i can get it to 100% is remove display; block; from in FF that is.

if i do this, then it throws away the scrollbar.

ii need it 100%-16px for the scrollbar to be visible...

no - it is possible, was working when i started but a css element was modified that unfortunately messed up the displayWidth in getting the other styles sorted...

that was for google chrome, firefox, internet explorer, opera and safari though...

Edited by Pierre 'Greywacke' du Toit

Share this post


Link to post
Share on other sites

This works, but you will have to set width of cells, i used approx equal percentage for all, originally i used min-width, but most browsers ignored it and did not apply, changed to width: and they filled out to full total width on all IE 10, FF, Opera, Safari and Chrome.

#form_services tbody.scrollContent {    background: none repeat scroll 0 0 #D8D8D8;    height: 281px;    left: 0;    overflow-y: scroll;    position: absolute;    right: 0;    width: 100%;}head:first-child + body tbody.scrollContent[class] {    display: inline;}.normalRow, .alternateRow {width:100%;}tbody.scrollContent td, tbody.scrollContent tr.normalRow td {width:16%; }head:first-child + body div.tableContainer[class] table {    width: 98%;}html > body div.tableContainer table {    float: none;    margin: 0;    position: relative;}

Share this post


Link to post
Share on other sites

thanks dsoneuk! it helped alot! ;) i've got the total css now as follows (did not want to lose the colour styling):

/* define height and width of scrollable area. Add 16px to width for scrollbar          *//* allow WinIE to scale 100% width of browser by not defining a width                   *//* WARNING: applying a background here may cause problems with scrolling in WinIE 5.x   */div.tableContainer {	clear: both;	border: 1px outset #808080;	height: 500px;	overflow: auto;	width: 97%;}html div.tableContainer/* */ {	padding: 0 16px 0 0;}html>body div.tableContainer {	width: 97%;	height: 467px;	padding: 0;}head:first-child+body div[class].tableContainer {	width: 97%;	height: 467px;	overflow: hidden;}div.tableContainer table {	float: left;	width: 100%}html div.tableContainer table/* */ {	margin: 0 -16px 0 0;	width: 100%;}html>body div.tableContainer table {	float: none;	margin: 0;	width: 100%;}head:first-child+body div[class].tableContainer table {	width: 100%;}thead.fixedHeader tr {	position: relative;	width: 100%;	top: expression(document.getElementById("tableContainer").scrollTop+"px");}                                              */head:first-child+body thead[class].fixedHeader tr {	display: block;	width: 100%;}thead.fixedHeader th {	background: #d8d8d8;	font-weight: normal;	padding: 4px 3px;	text-align: left;}head:first-child+body tbody[class].scrollContent {	display: block;	width: 100%;	width: expression((document.getElementById("fixedHeader").offsetWidth-16)+"px");	height: 400px;	overflow: auto;}tbody.scrollContent td, tbody.scrollContent tr.normalRow td {	background-color: #f8f8f8;	border-bottom: none;	border-left: none;	border-right: 1px solid #d8d8d8;	border-top: none;	padding: 2px 3px 2px 3px;	width: 16.666%;}tbody.scrollContent tr.normalRow td + td + td + td + td + td {	background-color: #f8f8f8;	border-bottom: none;	border-left: none;	border-right: none;	border-top: none;	padding: 2px 3px 2px 3px;	width: 16.667%;}tbody.scrollContent tr.alternateRow td {	background-color: #d8d8d8;	border-bottom: none;	border-left: none;	border-right: 1px solid #f8f8f8;	border-top: none;	padding: 2px 3px 2px 3px;	width: 16.666%;}tbody.scrollContent tr.alternateRow td + td + td + td + td + td {	background-color: #d8d8d8;	border-bottom: none;	border-left: none;	border-right: none;	border-top: none;	padding: 2px 3px 2px 3px;	width: 16.667%;}head:first-child+body thead[class].fixedHeader th {	border-right: none;	padding: 2px 4px 2px 4px;}head:first-child+body thead[class].fixedHeader th[title=EXECUTE], head:first-child+body thead[class].fixedHeader th[title=RESET] {	width: 50%;};head:first-child+body tbody[class].scrollContent td {	border-right: none;	padding: 2px 4px 2px 4px;	width: 100%;}#form_services thead.fixedHead {	margin-top: 2px;	margin-bottom: 2px;	width: 100%;	border-top: 1px solid #f8f8f8;	border-left: 1px solid #f8f8f8;	border-right: 1px solid #b8b8b8;	border-bottom: 1px solid #b8b8b8;}#form_services tbody.scrollContent {	height: 350px;	overflow-y: scroll;	background: #d8d8d8;	width: 100%;}#form_services tbody.scrollContent {    background: none repeat scroll 0 0 #D8D8D8;    height: 350px;    left: 0;    overflow-y: scroll;    position: absolute;    right: 0;    width: 100%;}head:first-child + body tbody.scrollContent[class] {    display: inline;}.normalRow, .alternateRow {	width: 100%;}tbody.scrollContent td#cntf, tbody.scrollContent tr.normalRow td#cntf {	width: 100% !important;	whitespace: nowrap !important;}tbody.scrollContent td, tbody.scrollContent tr.normalRow td {	width: 17.439% !important !important;	whitespace: nowrap !important;}tbody.scrollContent td td, tbody.scrollContent tr.normalRow td td {	width: 9.492% !important !important;	whitespace: nowrap !important;}tbody.scrollContent td td td, tbody.scrollContent tr.normalRow td td td {	width: 23.179% !important !important;	whitespace: nowrap !important;}tbody.scrollContent td td td td, tbody.scrollContent tr.normalRow td td td td {	width: 31.788% !important !important;	whitespace: nowrap !important;}tbody.scrollContent td td td td td, tbody.scrollContent tr.normalRow td td td td td {	width: 7.726% !important !important;	whitespace: nowrap !important;}tbody.scrollContent td td td td td td, tbody.scrollContent tr.normalRow td td td td td td {	width: 10.375% !important !important;	whitespace: nowrap !important;}head:first-child + body div.tableContainer[class] table {    width: 100%;}html > body div.tableContainer table {    float: none;    margin: 0;    position: relative;}

but... the widths still do not align to the header's widths (which is needed to have the content not wrap over to the next line, similar width to the header dropdowns...) -_-

you will notice attempts at giving a % width relative to the header's, but seems i might have to use a javascript with inline styles to update these td's upon population?

the widths need to be relative % as follows on the table body columns:

percentage: 17.439% 9.492% 23.179% 31.789% 7.726% 10.375%td width's: 237px   129px  315px   432px   105px  141pxtr width's: 1359px  1359px 1359px  1359px  1359px 1359px

please let me know what you think...

Edited by Pierre 'Greywacke' du Toit

Share this post


Link to post
Share on other sites

the columns in the tbody don't match the columns in thead because you gave them display:block. While doing so allows you to scroll, the tbody's connection with thead has been severed and as a result the entire width of the body was set to the width of the 1st column on thead. another option is to restore thead and tbody's display to default and instead use position:relative+absolute.

 

Simply using relative+absolute on the table+thead/tbody will work at first,but since you can't control the height of tbody this way (the css will more or less be ignored) it won't scroll as you please.

 

so instead of setting relative+absolute on the table itself, use 2 wrapping divs.

<div class="scrollableTable">    <div class="scrollableArea">        <table>          <thead></thead>          <tbody></tbody>        </table>    </div></div>.scrollbleTable{position:relativepadding-top:6.5em;/*static height for thead*/ }.scrollableTable .scrollableArea{overflow:autoheight: 400px; /*how much scrollable height you want tbody to show*//*you might want to add a width slightly wider than tbody, scrollbars will offset the columns otherwise*/}.scrollableTable thead{position':absolute;top:0}

thead should still be connected to tbody so column widths shouldn't get demolished. and thead will fill up the top padding of .scrollableTable. tbody, and the rest of the table will inherit scrollableArea so that it remains scrollable, yet you can also set the height of the veiwable scroll area by changing scrollableArea's height.

 

see if that works for you.

Share this post


Link to post
Share on other sites

OR you could just set the top row of table header together with scrollable table rows

#form_services tbody.scrollContent {    background: none repeat scroll 0 0 #D8D8D8;    height: 281px;    left: 0;    overflow-y: scroll;    position: absolute;    right: 0;    width: 101%;}head:first-child + body tbody.scrollContent[class] {    display: inline;}.normalRow, .alternateRow {    width: 100%;}head:first-child + body div.tableContainer[class] table {    width: 98%;}html > body div.tableContainer table {    float: none;    margin: 0;    position: relative;}#fixedHeader tr[title="ORDER BY"] th:nth-child(1), #table_results tbody.scrollContent td:nth-child(1) {    width: 18% !important;}#fixedHeader tr[title="ORDER BY"] th:nth-child(2), #table_results tbody.scrollContent td:nth-child(2) {    width: 10% !important;}#fixedHeader tr[title="ORDER BY"] th:nth-child(3), #table_results tbody.scrollContent td:nth-child(3) {    width: 21% !important;}#fixedHeader tr[title="ORDER BY"] th:nth-child(4), #table_results tbody.scrollContent td:nth-child(4) {    width: 34% !important;}#fixedHeader tr[title="ORDER BY"] th:nth-child(5), #table_results tbody.scrollContent td:nth-child(5) {    width: 9% !important;}#fixedHeader tr[title="ORDER BY"] th:nth-child(6), #table_results tbody.scrollContent td:nth-child(6) {    min-width: 141px !important;}

this again works in all browsers, but i did have to add min-width: fixed width for last column. used whole numbers for column width, as i never trust it to give that precise measurement.

 

and

 

width: 7.726% !important !important;

 

 

:rofl: must have been desperate to get it to work, using TWO !important, could be handy if it did work.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...