Link to home
Start Free TrialLog in
Avatar of WestCoast_BC
WestCoast_BCFlag for Canada

asked on

Why are my columns in an HTML table not the same width in the head compared to the body

I am trying to create a simple HTML table and for some reason the columns in the header are not the same width has in the body. My code looks like:
	<table class="table AdTableStyle1 ManageSched" id="UserSchedule" border="1" cellpadding="4" cellspacing="0">
		<thead>
			<tr>
				<th >Day</th>
				<th >Date <span style="font-size:10px">(mm/dd/yyyy)</span></th>
				<th >Start Time</th>
				<th >End Time</th>
			</tr>
		</thead>
		<tbody>
			<cfloop index="thisRow" from="1" to="#arrayLen(sched.data)#">
				<cfoutput><tr>
					<td>#sched.data[thisRow].day#</td>
					<td>#sched.data[thisRow].date#</td>
					<td>#sched.data[thisRow].starttime#</td>
					<td>#sched.data[thisRow].endtime#</td>
				</tr></cfoutput>
			</cfloop>
		</tbody>

	</table>

Open in new window

Capture.PNG
Avatar of WestCoast_BC
WestCoast_BC
Flag of Canada image

ASKER

If I get rid of the <thead></thead> and <tbody></tbody> the columns have the same width.

How can I continue to use thead and tbody and ensure that all of the cells in the same column are the same width?
Avatar of gdemaria
gdemaria
Flag of United States of America image
Weird, I didn't think this was possible.

I suggest removing the classes you have defined and see if any effect the display.   If yes, narrow down to the one that does and see if there is a thead or tbody definition in there that is controling it
Avatar of WestCoast_BC
WestCoast_BC
Flag of Canada image

ASKER

I need to have my body have a maximum height with a vertical scroll bar. I was doing this by having the following style:
    
display: block;
    overflow-y: scroll;
    max-height: 300px;

Open in new window


I think the display:block is causing my problem.
Avatar of WestCoast_BC
WestCoast_BC
Flag of Canada image

ASKER

I was hoping to be able to have a scrollable table where only the body scrolls leaving the header line always visible. Having the style as indicated in my previous comment allows the table to behave this way but the cell width in a column end up not being the same in the header as in the body.
Does anyone know how I can have a scrollable body section of the table?
This question needs an answer!
Become an EE member today
7 DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform.
View membership options
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.