Adding a scrollbar to a table

I am creating a CMS. I have set up a table within a form within a table so that I can select from a list to edit the item or create a new item and add it to the relevant database table. I now want to limit the length of the list and use a scroll bar to display any unseen items.

I have tried using a div around the table and while this displays a scroll bar it does not link to the content of the table. Here is the code:

<table class = "table">
								
					<colgroup>
						<col id = "empty"></col>					
						<col id = "date"></col>
						<col id = "visit"></col>
					</colgroup>
					<thead>
						<tr>
							<th class = "emptycol"></th>					
							<th class = "datecol" scope = "col">Date</th>
							<th class = "visitcol" scope = "col">Visit</th>
						</tr>
					</thead>
					<div class = "scroll">
						
							<?php foreach($visits as $visit):?>
							<div class = "scroll" >
								<table class = "formtable">
									<form action = "" method = "post" class = "tableform";>
												<tr>							
													<td class = "td"><input  type = "hidden" name = "id" value = "<?php htmlout($visit['id']);?>"></td>
													<td class = "td1"><input type = "submit" name = "visit" value = "<?php htmlout($visit['lecturedate']);?>"></td>
													<td class = "td2"><input type = "submit" class = "wrap" name = "visit" value = "<?php htmlout($visit['title']);?>"></td>
												</tr>
									</form>
								</table>
							</div>	
							<?php endforeach;?>
					</div>	
					
			</table>

and the css for the scroll class is:

.scroll
		{
			min-height: 67.5%;
			width: 26.5%;
			position: absolute;
			top: 162%;
			overflow: scroll;
		}

Any help would be most welcome.

1 Like

Hi,

Unfortunately that code is invalid and won’t work as you cannot place divs inside a table like that. Any divs must be inside matched td tags but never outside. Even if it did work it would divorce the table data from the table headings and thus be of no use.

I’d need to know more about what you are trying to do so perhaps an html/css code example without php would be in order so we can see what type of structure we are dealing with first.

I’m guessing that you want the body of the table to scroll while the table headers remain in place? While this may seem a reasonable request browsers in fact make this almost impossible in straight html css.

You can actually set the tbody element to have a height and thus gain a scrollbar when overflow is applied (in modern browsers) but the drawback is that you have to set tbody to display:block which once again divorces the data from the headings and unless your columns are a fixed width it is not feasible to do this (otherwise the heading contracts and maintains different widths compared to the data underneath).

There are some complicated css methods that can achieve partial success but you would be better off looking at a JS approach to maintain fixed headers which would allow the table structure to remain untouched.

If fixed widths are ok for the columns then let me know and I will knock up a rough demo of how it can be achieved.

1 Like

Many thanks, PaulOB, for your offer of help. Your guess about the body scrolling while leaving the header intact is correct. Also, the body columns are a fixed width as are also the header columns but they are independent. I’m not sure what you mean by an html/css code example without php. The css file follows:

/*Style the heading table*/
		.table
		{
			width: 25%;
			/*height: 5%;*/
			border-collapse: collapse;
			position: relative;
			top: -`12.5%;
			background: yellow			;
		}
		
		.scroll
		{
			min-height: 67.5%;
			width: 26.5%;
			position: absolute;
			top: 162%;
			overflow: scroll;
		}
		
		/*Style list table*/
		.formtable
		{
			position: relative;
			top: -14.5%;
			background: #5F6975;			
			border: 1px solid black;
			border-collapse: collapse;
			font-family: Comic Sans MS;
			font-style: italic;
			color: black;
			width: 25%;			
			display: block;
			text-align: center;
			/*border-spacing: 0;*/
			
		}
		
		/*Style form in list table*/
		.tableform
		{
			width: 150%;
		}
		
		.table th
		{
			border: none;
		}
		
		/*Style the date and visit headings */
		.table .datecol
		{
			border: 1px solid black;
			font-family: Comic Sans MS;
			font-size: 1.2em;
			font-style: italic;
			background: green;
			position: absolute;
			top: -3250%;
			text-align: center;
			width: 30.5%;
			border-left: none;
			left: -.1%;
		}
		
		.table .visitcol
		{
			border: 1px solid black;
			font-family: Comic Sans MS;
			font-size: 1.2em;
			font-style: italic;
			background: green;
			position: absolute;
			top: -3250%;
			left: 31.55%;
			text-align: center;
			width: 67.6%;
			border-left: none;
		}
		
		.table .datecol
		{
			border-left: none;
		}
		
		.formtable .td1, .formtable .td2
		{
			border-left: none;
			border-right: 1px solid black;
			text-align: center;
			background: #5F6975;
		}
		
		.formtable td.td1
		{
			width: 30.8%;
		}
		
		.formtable td.td2 
		{
			width: 98%;
		}
		
		.formtable input
		{
			background: #5F6975;
			border: none;
		}
		
		.formtable input:hover
		{
			color: red;
		}
		
		/*Style date heading*/
		#date
		{	
			position: absolute;
			/*text-align: center;*/
		}
		
		/*Style visit heading*/
		#visit
		{
			width: 30.5%;
			position: relative;	
			left: 100%;			
			/*background: red;*/
			/*border-left: none;*/
		}
		
		#empty
		{
			width: .01%;
			background: green;
			
		}
		
		/*Make cell adjust height to suit.*/
		.wrap
		{
			white-space: normal;
			word-wrap: word-break;			
		}
		
		/*Style the edit form*/
		.myForm
		{
			font-size: 1.2em;
			/*background-color: #5F6975;*/
			background: rgba(255, 255, 255, .3);
			font-family: Comic Sans MS;
			width: 50%;
			height: 25.3%;
			color: black;	
			position: relative;
			left: 40%;
			top: -92%;
		}
		
		/*Style labels*/
		.label
		{
			display: inline-block;
			width: 25%;
			vertical-align: center;
			text-align: center;
			/*margin-right: none;*/
			font-weight: bold;
			font-style: italic;
			border: 1px solid black;
		}
		
		.myForm textarea
		{
			position: absolute;
			left: 30%;			
			width: 80%;
			text-align: center;
			white-space: normal;
			/*background: #5F6975;*/
			background: rgba(255, 255, 255, .3);
			border: 1px solid black;
			border-spacing: 0;
		}
		
		/*form submit buttons*/
		.myForm .form1		
		{
			position: absolute;
			top: 200%;
			left: 50%;			
		}

		.myForm .td
		{
			height: .o1%;
		}

and here is the full html:

<?php include_once $_SERVER['DOCUMENT_ROOT'] . '/includes/helpers.inc.php';?>
<DOCTYPE html>
<html lang = "en">
	<head>
		<meta charset = "utf-8">
		<title>Administer Site</title>
		<link rel = "stylesheet" type = "text/css" href = "AboutUsMk2.css">
		<link  rel = "stylesheet" type = "text/css" href = "headerMk1.css">
		<link  rel = "stylesheet" type = "text/css" href = "lectures.css">		
	</head>
	<body>
	<img id = "background_body" src = "background2.jpg"/>
		<header id = "head">
				<h1 id = "head_h1">West Surrey National Trust Centre</h1>
				<h3 id = "head_h3">In support of the National Trust since 1971</h3>
				<p id = "head_p">in support of</p>
				<img  id = "head_img" src = "NTlogo.png"/>
				<nav>
					<ul>
						<li><a href = "../index.php">Home</a></li>						
					</ul>					
				</nav>
		</header>
		<?php if (isset($visits)):?>
		
			<table class = "table">
								
					<colgroup>
						<col id = "empty"></col>					
						<col id = "date"></col>
						<col id = "visit"></col>
					</colgroup>
					<thead>
						<tr>
							<th class = "emptycol"></th>					
							<th class = "datecol" scope = "col">Date</th>
							<th class = "visitcol" scope = "col">Visit</th>
						</tr>
					</thead>
					<div class = "scroll">
						
							<?php foreach($visits as $visit):?>
							<div class = "scroll" >
								<table class = "formtable">
									<form action = "" method = "post" class = "tableform";>
												<tr>							
													<td class = "td"><input  type = "hidden" name = "id" value = "<?php htmlout($visit['id']);?>"></td>
													<td class = "td1"><input type = "submit" name = "visit" value = "<?php htmlout($visit['lecturedate']);?>"></td>
													<td class = "td2"><input type = "submit" class = "wrap" name = "visit" value = "<?php htmlout($visit['title']);?>"></td>
												</tr>
									</form>
								</table>
							</div>	
							<?php endforeach;?>
					</div>	
					
			</table>
		
			
		<form action = "" method = "post" class = "myForm";>
			<p>
				<label class = "label" for = "title">Heading</label>
					<textarea id = "title" name = "title"  cols = "100" ><?php htmlout($title);?>
					</textarea>
			</p>
			<p>
				<label class = "label"  for = "lecturedate">Date</label>
					<textarea id = "lecturedate" name = "lecturedate"  cols = "100" ><?php htmlout($lecturedate);?>
					</textarea>
			</p>
			<p>
				<label class = "label"  for = "sub_heading">Sub Heading</label>
					<textarea id = "sub_heading" name = "sub_heading" cols = "100"></textarea>
			</p>
			<p>
				<label class = "label"  for = "content">Content</label>
					<textarea id = "content" name = "content" rows = "10" cols = "100"><?php htmlout($text);?>
					</textarea>					
			</p>
			<p>
				<span class = "form1">
				
					<input type = "submit" name = "action" value = "New">
					<input type = "hidden" name = "id" value = "<?php htmlout($id);?>">
					<input type = "submit" name = "action" value = "Edit">
					<!--<input type = "reset" value = "Clear">-->
					<input type = "submit"  onClick = "myFunction" value = "Clear">
					<input type = "submit" name = "delete" value = "Delete">
				</span>
			</p>
		</form>
	<?php endif;?>	
	<script type = "text/javascript">
		function myFunction()
		{
			document.getElementById("myForm").reset();			
		}
	</script>
		<div id = 'output'>
		<?php if(isset ($text)):			
			htmlout ($text);
			endif;?>
		</div>
			
	</body>
</html>

Please let me know if you need anything else.

Best wishes

Tony Holland

I would think the easiest solution would be to make this into two tables. One for the fixed header, and another, set up as you have it, with a scrolling div with the table of content rows in it.

Thanks tracknut. This is how I set up the site, but it doesn’t work!

Can you give a link to the site? Perhaps I’m missing something.

Sorry Tracknut but the site isn’t live yet, it only exists on my PC

Then maybe paste the code here again with the changes to html and the css, and what specifically “it’s not working” means.

He did but the post got caught in our safety measures, I just released it (see post #3 above)

Thanks PaulOB for the offer of help. I’m not sure what you mean by an html/css code example without php. I’ll send the full html file and the css one; if you need more please let me know.

  1. HTML
<?php include_once $_SERVER['DOCUMENT_ROOT'] . '/includes/helpers.inc.php';?>
<DOCTYPE html>
<html lang = "en">
	<head>
		<meta charset = "utf-8">
		<title>Administer Site</title>
		<link rel = "stylesheet" type = "text/css" href = "AboutUsMk2.css">
		<link  rel = "stylesheet" type = "text/css" href = "headerMk1.css">
		<link  rel = "stylesheet" type = "text/css" href = "lectures.css">		
	</head>
	<body>
	<img id = "background_body" src = "background2.jpg"/>
		<header id = "head">
				<h1 id = "head_h1">West Surrey National Trust Centre</h1>
				<h3 id = "head_h3">In support of the National Trust since 1971</h3>
				<p id = "head_p">in support of</p>
				<img  id = "head_img" src = "NTlogo.png"/>
				<nav>
					<ul>
						<li><a href = "../index.php">Home</a></li>						
					</ul>					
				</nav>
		</header>
		<?php if (isset($visits)):?>
		
			<table class = "table">
								
					<colgroup>
						<col id = "empty"></col>					
						<col id = "date"></col>
						<col id = "visit"></col>
					</colgroup>
					<thead>
						<tr>
							<th class = "emptycol"></th>					
							<th class = "datecol" scope = "col">Date</th>
							<th class = "visitcol" scope = "col">Visit</th>
						</tr>
					</thead>
					<div class = "scroll">
						
							<?php foreach($visits as $visit):?>
							<div class = "scroll" >
								<table class = "formtable">
									<form action = "" method = "post" class = "tableform";>
												<tr>							
													<td class = "td"><input  type = "hidden" name = "id" value = "<?php htmlout($visit['id']);?>"></td>
													<td class = "td1"><input type = "submit" name = "visit" value = "<?php htmlout($visit['lecturedate']);?>"></td>
													<td class = "td2"><input type = "submit" class = "wrap" name = "visit" value = "<?php htmlout($visit['title']);?>"></td>
												</tr>
									</form>
								</table>
							</div>	
							<?php endforeach;?>
					</div>	
					
			</table>
		
			
		<form action = "" method = "post" class = "myForm";>
			<p>
				<label class = "label" for = "title">Heading</label>
					<textarea id = "title" name = "title"  cols = "100" ><?php htmlout($title);?>
					</textarea>
			</p>
			<p>
				<label class = "label"  for = "lecturedate">Date</label>
					<textarea id = "lecturedate" name = "lecturedate"  cols = "100" ><?php htmlout($lecturedate);?>
					</textarea>
			</p>
			<p>
				<label class = "label"  for = "sub_heading">Sub Heading</label>
					<textarea id = "sub_heading" name = "sub_heading" cols = "100"></textarea>
			</p>
			<p>
				<label class = "label"  for = "content">Content</label>
					<textarea id = "content" name = "content" rows = "10" cols = "100"><?php htmlout($text);?>
					</textarea>					
			</p>
			<p>
				<span class = "form1">
				
					<input type = "submit" name = "action" value = "New">
					<input type = "hidden" name = "id" value = "<?php htmlout($id);?>">
					<input type = "submit" name = "action" value = "Edit">
					<!--<input type = "reset" value = "Clear">-->
					<input type = "submit"  onClick = "myFunction" value = "Clear">
					<input type = "submit" name = "delete" value = "Delete">
				</span>
			</p>
		</form>
	<?php endif;?>	
	<script type = "text/javascript">
		function myFunction()
		{
			document.getElementById("myForm").reset();			
		}
	</script>
		<div id = 'output'>
		<?php if(isset ($text)):			
			htmlout ($text);
			endif;?>
		</div>
			
	</body>
</html>
  1. CSS
	/*Style the heading table*/
		.table
		{
			width: 25%;
			/*height: 5%;*/
			border-collapse: collapse;
			position: relative;
			top: -`12.5%;
			background: yellow			;
		}
		
		.scroll
		{
			min-height: 67.5%;
			width: 26.5%;
			position: absolute;
			top: 162%;
			overflow: scroll;
		}
		
		/*Style list table*/
		.formtable
		{
			position: relative;
			top: -14.5%;
			background: #5F6975;			
			border: 1px solid black;
			border-collapse: collapse;
			font-family: Comic Sans MS;
			font-style: italic;
			color: black;
			width: 25%;			
			display: block;
			text-align: center;
			/*border-spacing: 0;*/
			
		}
		
		/*Style form in list table*/
		.tableform
		{
			width: 150%;
		}
		
		.table th
		{
			border: none;
		}
		
		/*Style the date and visit headings */
		.table .datecol
		{
			border: 1px solid black;
			font-family: Comic Sans MS;
			font-size: 1.2em;
			font-style: italic;
			background: green;
			position: absolute;
			top: -3250%;
			text-align: center;
			width: 30.5%;
			border-left: none;
			left: -.1%;
		}
		
		.table .visitcol
		{
			border: 1px solid black;
			font-family: Comic Sans MS;
			font-size: 1.2em;
			font-style: italic;
			background: green;
			position: absolute;
			top: -3250%;
			left: 31.55%;
			text-align: center;
			width: 67.6%;
			border-left: none;
		}
		
		.table .datecol
		{
			border-left: none;
		}
		
		.formtable .td1, .formtable .td2
		{
			border-left: none;
			border-right: 1px solid black;
			text-align: center;
			background: #5F6975;
		}
		
		.formtable td.td1
		{
			width: 30.8%;
		}
		
		.formtable td.td2 
		{
			width: 98%;
		}
		
		.formtable input
		{
			background: #5F6975;
			border: none;
		}
		
		.formtable input:hover
		{
			color: red;
		}
		
		/*Style date heading*/
		#date
		{	
			position: absolute;
			/*text-align: center;*/
		}
		
		/*Style visit heading*/
		#visit
		{
			width: 30.5%;
			position: relative;	
			left: 100%;			
			/*background: red;*/
			/*border-left: none;*/
		}
		
		#empty
		{
			width: .01%;
			background: green;
			
		}
		
		/*Make cell adjust height to suit.*/
		.wrap
		{
			white-space: normal;
			word-wrap: word-break;			
		}
		
		/*Style the edit form*/
		.myForm
		{
			font-size: 1.2em;
			/*background-color: #5F6975;*/
			background: rgba(255, 255, 255, .3);
			font-family: Comic Sans MS;
			width: 50%;
			height: 25.3%;
			color: black;	
			position: relative;
			left: 40%;
			top: -92%;
		}
		
		/*Style labels*/
		.label
		{
			display: inline-block;
			width: 25%;
			vertical-align: center;
			text-align: center;
			/*margin-right: none;*/
			font-weight: bold;
			font-style: italic;
			border: 1px solid black;
		}
		
		.myForm textarea
		{
			position: absolute;
			left: 30%;			
			width: 80%;
			text-align: center;
			white-space: normal;
			/*background: #5F6975;*/
			background: rgba(255, 255, 255, .3);
			border: 1px solid black;
			border-spacing: 0;
		}
		
		/*form submit buttons*/
		.myForm .form1		
		{
			position: absolute;
			top: 200%;
			left: 50%;			
		}

		.myForm .td
		{
			height: .o1%;
		}

Hmmm… I don’t see two tables in there. Take a look at this example. It has a .scroll class that has a fixed height and overflow:scroll, which surrounds the table of rows in your form.

[code]

.scroll{ height:300px;overflow:scroll; }
<colgroup>
    <col id = "empty"></col>                    
    <col id = "date"></col>
    <col id = "visit"></col>
</colgroup>
<thead>
    <tr>
        <th class = "emptycol"></th>                    
        <th class = "datecol" scope = "col">Date</th>
        <th class = "visitcol" scope = "col">Visit</th>
    </tr>
</thead>
</table>
        <?php foreach($visits as $visit):?>

            <tr>                            
                <td class = "td"><input  type = "hidden" name = "id" value = "<?php htmlout($visit['id']);?>"></td>
                <td class = "td1"><input type = "submit" name = "visit" value = "<?php htmlout($visit['lecturedate']);?>"></td>
                <td class = "td2"><input type = "submit" class = "wrap" name = "visit" value = "<?php htmlout($visit['title']);?>"></td>
            </tr>
        <?php endforeach;?>
    </table>
</form>
[/code]

You could try just posting the HTML rather than the PHP that generates it. You can get that by using View Source

Here’s the output from view source:

<DOCTYPE html>
<html lang = "en">
	<head>
		<meta charset = "utf-8">
		<title>Administer Site</title>
		<link rel = "stylesheet" type = "text/css" href = "AboutUsMk2.css">
		<link  rel = "stylesheet" type = "text/css" href = "headerMk1.css">
		<link  rel = "stylesheet" type = "text/css" href = "lectures.css">		
	<script type="text/javascript" src="http://ff.kis.scr.kaspersky-labs.com/1B74BD89-2A22-4B93-B451-1C9E1052A0EC/main.js" charset="UTF-8"></script></head>
	<body>
	<img id = "background_body" src = "background2.jpg"/>
		<header id = "head">
				<h1 id = "head_h1">West Surrey National Trust Centre</h1>
				<h3 id = "head_h3">In support of the National Trust since 1971</h3>
				<p id = "head_p">in support of</p>
				<img  id = "head_img" src = "NTlogo.png"/>
				<nav>
					<ul>
						<li><a href = "../index.php">Home</a></li>						
					</ul>					
				</nav>
		</header>
					<table class = "table">
				<colgroup>
					<col id = "empty"></col>					
					<col id = "date"></col>
					<col id = "visit"></col>
				</colgroup>
				<tr>
					<th class = "emptycol"></th>					
					<th class = "datecol" scope = "col">Date</th>
					<th class = "visitcol" scope = "col">Visit</th>
				</tr>
									<table class = "formtable">
						<form action = "" method = "post" class = "tableform";>
							<tr>							
								<td class = "td"><input  type = "hidden" name = "id" value = "1"></td>
								<td class = "td1"><input type = "submit" name = "visit" value = "5/1/2016"></td>
								<td class = "td2"><input type = "submit" class = "wrap" name = "visit" value = "Pepys: Plague and Fire"></td>
							</tr>
						</form>
					</table>
									<table class = "formtable">
						<form action = "" method = "post" class = "tableform";>
							<tr>							
								<td class = "td"><input  type = "hidden" name = "id" value = "2"></td>
								<td class = "td1"><input type = "submit" name = "visit" value = "12/8/2015"></td>
								<td class = "td2"><input type = "submit" class = "wrap" name = "visit" value = "Claydon"></td>
							</tr>
						</form>
					</table>
									<table class = "formtable">
						<form action = "" method = "post" class = "tableform";>
							<tr>							
								<td class = "td"><input  type = "hidden" name = "id" value = "4"></td>
								<td class = "td1"><input type = "submit" name = "visit" value = "26/8/2015"></td>
								<td class = "td2"><input type = "submit" class = "wrap" name = "visit" value = "Provender House"></td>
							</tr>
						</form>
					</table>
									<table class = "formtable">
						<form action = "" method = "post" class = "tableform";>
							<tr>							
								<td class = "td"><input  type = "hidden" name = "id" value = "5"></td>
								<td class = "td1"><input type = "submit" name = "visit" value = "4/9/2015"></td>
								<td class = "td2"><input type = "submit" class = "wrap" name = "visit" value = "Ightham Mote"></td>
							</tr>
						</form>
					</table>
									<table class = "formtable">
						<form action = "" method = "post" class = "tableform";>
							<tr>							
								<td class = "td"><input  type = "hidden" name = "id" value = "7"></td>
								<td class = "td1"><input type = "submit" name = "visit" value = "5/8/2015"></td>
								<td class = "td2"><input type = "submit" class = "wrap" name = "visit" value = "Eltham Palace"></td>
							</tr>
						</form>
					</table>
									<table class = "formtable">
						<form action = "" method = "post" class = "tableform";>
							<tr>							
								<td class = "td"><input  type = "hidden" name = "id" value = "8"></td>
								<td class = "td1"><input type = "submit" name = "visit" value = "19/8/2015"></td>
								<td class = "td2"><input type = "submit" class = "wrap" name = "visit" value = "Watts Gallery"></td>
							</tr>
						</form>
					</table>
									<table class = "formtable">
						<form action = "" method = "post" class = "tableform";>
							<tr>							
								<td class = "td"><input  type = "hidden" name = "id" value = "9"></td>
								<td class = "td1"><input type = "submit" name = "visit" value = "16/9/2015"></td>
								<td class = "td2"><input type = "submit" class = "wrap" name = "visit" value = "Upton House"></td>
							</tr>
						</form>
					</table>
									<table class = "formtable">
						<form action = "" method = "post" class = "tableform";>
							<tr>							
								<td class = "td"><input  type = "hidden" name = "id" value = "10"></td>
								<td class = "td1"><input type = "submit" name = "visit" value = "22/9/2015"></td>
								<td class = "td2"><input type = "submit" class = "wrap" name = "visit" value = "Salisbury and Braemar House"></td>
							</tr>
						</form>
					</table>
									<table class = "formtable">
						<form action = "" method = "post" class = "tableform";>
							<tr>							
								<td class = "td"><input  type = "hidden" name = "id" value = "12"></td>
								<td class = "td1"><input type = "submit" name = "visit" value = "11/9/2015"></td>
								<td class = "td2"><input type = "submit" class = "wrap" name = "visit" value = "The Cotswold River Thames Explorer"></td>
							</tr>
						</form>
					</table>
									<table class = "formtable">
						<form action = "" method = "post" class = "tableform";>
							<tr>							
								<td class = "td"><input  type = "hidden" name = "id" value = "13"></td>
								<td class = "td1"><input type = "submit" name = "visit" value = "14/1/2016"></td>
								<td class = "td2"><input type = "submit" class = "wrap" name = "visit" value = "Lunch in the Clink"></td>
							</tr>
						</form>
					</table>
									<table class = "formtable">
						<form action = "" method = "post" class = "tableform";>
							<tr>							
								<td class = "td"><input  type = "hidden" name = "id" value = "14"></td>
								<td class = "td1"><input type = "submit" name = "visit" value = "20/1/2016"></td>
								<td class = "td2"><input type = "submit" class = "wrap" name = "visit" value = "&quot;Shoes: Pleasure &amp; Pain&quot; Exhibition at The Victoria &amp; Albert Museum"></td>
							</tr>
						</form>
					</table>
									<table class = "formtable">
						<form action = "" method = "post" class = "tableform";>
							<tr>							
								<td class = "td"><input  type = "hidden" name = "id" value = "15"></td>
								<td class = "td1"><input type = "submit" name = "visit" value = "26/1/2016"></td>
								<td class = "td2"><input type = "submit" class = "wrap" name = "visit" value = "&quot;Hampstead, a London Village&quot; with City &amp; Village Tours"></td>
							</tr>
						</form>
					</table>
									<table class = "formtable">
						<form action = "" method = "post" class = "tableform";>
							<tr>							
								<td class = "td"><input  type = "hidden" name = "id" value = "16"></td>
								<td class = "td1"><input type = "submit" name = "visit" value = "29/1/2016"></td>
								<td class = "td2"><input type = "submit" class = "wrap" name = "visit" value = "Visit to The Royal Albert Hall"></td>
							</tr>
						</form>
					</table>
									<table class = "formtable">
						<form action = "" method = "post" class = "tableform";>
							<tr>							
								<td class = "td"><input  type = "hidden" name = "id" value = "19"></td>
								<td class = "td1"><input type = "submit" name = "visit" value = "4/2/2016"></td>
								<td class = "td2"><input type = "submit" class = "wrap" name = "visit" value = "Two Temple Place, London"></td>
							</tr>
						</form>
					</table>
									<table class = "formtable">
						<form action = "" method = "post" class = "tableform";>
							<tr>							
								<td class = "td"><input  type = "hidden" name = "id" value = "20"></td>
								<td class = "td1"><input type = "submit" name = "visit" value = "12/2/2016"></td>
								<td class = "td2"><input type = "submit" class = "wrap" name = "visit" value = "Concert at G Live, London Road, Guildford GU21 2AA"></td>
							</tr>
						</form>
					</table>
					
			</table>		
			
		
			
		<form action = "" method = "post" class = "myForm";>
			<p>
				<label class = "label" for = "title">Heading</label>
					<textarea id = "title" name = "title"  cols = "100" >Pepys: Plague and Fire					</textarea>
			</p>
			<p>
				<label class = "label"  for = "lecturedate">Date</label>
					<textarea id = "lecturedate" name = "lecturedate"  cols = "100" >5/1/2016					</textarea>
			</p>
			<p>
				<label class = "label"  for = "sub_heading">Sub Heading</label>
					<textarea id = "sub_heading" name = "sub_heading" cols = "100"></textarea>
			</p>
			<p>
				<label class = "label"  for = "content">Content</label>
					<textarea id = "content" name = "content" rows = "10" cols = "100">We shall meet our guide at the old parish of St Giles-in-the-Fields in time to buy coffee before embarking on a tour which will take us from the West End Rookeries where the Great Plague broke out in 1665 to Pie Corner in the City where the flames of the Great Fire died to embers. Following a stop to buy lunch we will then drive to Greenwich for the blockbuster exhibition ‘Samuel Pepys: Plague, Fire and Revolution’ at the National Maritime Museum. The exhibition explores the plague and fire with wonderful paintings and objects from museums, galleries and private collections across Britain and beyond.  You will be able to purchase afternoon refreshments at the museum before our return home.
Coach leaves Farnham SH 8.20am, Farnham BR 8.30am, Hatchlands 9.05am and National Maritime Museum at 4.45pm.  £41.
Booking slip to Saara Graham  01252 810708					</textarea>					
			</p>
			<p>
				<span class = "form1">
				
					<input type = "submit" name = "action" value = "New">
					<input type = "hidden" name = "id" value = "1">
					<input type = "submit" name = "action" value = "Edit">
					<!--<input type = "reset" value = "Clear">-->
					<input type = "submit"  onClick = "myFunction" value = "Clear">
					<input type = "submit" name = "delete" value = "Delete">
				</span>
			</p>
		</form>
		
	<script type = "text/javascript">
		function myFunction()
		{
			document.getElementById("myForm").reset();			
		}
	</script>
		<div id = 'output'>
		We shall meet our guide at the old parish of St Giles-in-the-Fields in time to buy coffee before embarking on a tour which will take us from the West End Rookeries where the Great Plague broke out in 1665 to Pie Corner in the City where the flames of the Great Fire died to embers. Following a stop to buy lunch we will then drive to Greenwich for the blockbuster exhibition ‘Samuel Pepys: Plague, Fire and Revolution’ at the National Maritime Museum. The exhibition explores the plague and fire with wonderful paintings and objects from museums, galleries and private collections across Britain and beyond.  You will be able to purchase afternoon refreshments at the museum before our return home.
Coach leaves Farnham SH 8.20am, Farnham BR 8.30am, Hatchlands 9.05am and National Maritime Museum at 4.45pm.  £41.
Booking slip to Saara Graham  01252 810708		</div>
			
	</body>
</html>

Off Topic:

@tholland: when you post code here, you have various ways to format it so that it displays correctly.

You can highlight your code, then use the </> button in the editor window, which will format it.

Or you can place three backticks ``` (top left key on US/UK keyboards) on a line before your code, and three on a line after your code. I find this approach easier, but unfortunately some European and other keyboards don’t have that character.

Thanks TechnoBear. Old dogs and new tricks!

1 Like

As already mentioned above it may be easier to use two tables to do this and just have the div around the table scroll instead (It’s not as semantic as using one table but easier to fix if dealing with fixed width columns).

The code you posted is as I suggested earlier is completely invalid and you can’t put table elements inside tr elements as that is not allowed. All content in a table must be inside td or th tags and that also applies to all your form elements and you cannot place them outside a tr.

I’m not sure that you need multiple form elements anyway and surely one form around the whole table would suffice and that would leave you able to just repeat each row. If you do want multiple form around each row then you would need to nest another table inside a td tag so that the form can go inside the td but around a nested table.

Assuming you only want one form around the whole table then you could just repeat in php each tr row of the table and keep the integrity of the table intact.

Here is an example with a cut down version of your code showing the final output in a valid page.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Administer Site</title>
<link rel="stylesheet" type="text/css" href="AboutUsMk2.css">
<link  rel="stylesheet" type="text/css" href="headerMk1.css">
<link  rel="stylesheet" type="text/css" href="lectures.css">
<script type="text/javascript" src="http://ff.kis.scr.kaspersky-labs.com/1B74BD89-2A22-4B93-B451-1C9E1052A0EC/main.js" charset="UTF-8"></script>
<style>
.table {
	width:30%;
	table-layout:fixed;
	background: #5F6975;
	border: 1px solid black;
	border-collapse: collapse;
	font-family: Comic Sans MS;
	font-style: italic;
	color: black;
	text-align: center;
}
.table th, .td {
	border: none;
}
.table th {
	border-bottom:1px solid #000
}
.td1, .td2 {
	border-left: none;
	border-right: 1px solid black;
	border-bottom:1px solid #000;
	text-align: center;
	background: #5F6975;
}
.td {
	width:0;
	overflow:hidden;
}
.td1 {
	width:30%;
}
.td2 {
	padding-right:20px
}
.formtable input:hover {
	color: red;
}
.wrap {
	white-space:normal;
	word-wrap:break-word;
}
.formtable input {
	background: #5F6975;
	border: none;
}
.formtable {
	height:250px;
	overflow-y:auto;
	overflow-x:hidden;
	width:30%;
	display:block;
}
.formtable .table {
	width:100%;
}
</style>
</head>
<body>
<form action="" method="post" class="tableform">
  <table class="table">
    <tr>
      <th class="td empty"></th>
      <th class="td1 datecol" scope = "col">Date</th>
      <th class="td2 visitcol" scope = "col">Visit</th>
    </tr>
  </table>
  <div class="formtable">
    <table class="table">
      <tr>
        <td class="td"><input  type="hidden" name = "id" value = "1"></td>
        <td class="td1"><input type="submit" name = "visit" value = "5/1/2016"></td>
        <td class="td2"><input type="submit" class="wrap" name = "visit" value = "Pepys: Plague and Fire"></td>
      </tr>
      <tr>
        <td class="td"><input  type="hidden" name = "id" value = "2"></td>
        <td class="td1"><input type="submit" name = "visit" value = "12/8/2015"></td>
        <td class="td2"><input type="submit" class="wrap" name = "visit" value = "Claydon"></td>
      </tr>
      <tr>
        <td class="td"><input  type="hidden" name = "id" value = "4"></td>
        <td class="td1"><input type="submit" name = "visit" value = "26/8/2015"></td>
        <td class="td2"><input type="submit" class="wrap" name = "visit" value = "Provender House"></td>
      </tr>
      <tr>
        <td class="td"><input  type="hidden" name = "id" value = "5"></td>
        <td class="td1"><input type="submit" name = "visit" value = "4/9/2015"></td>
        <td class="td2"><input type="submit" class="wrap" name = "visit" value = "Ightham Mote"></td>
      </tr>
      <tr>
        <td class="td"><input  type="hidden" name = "id" value = "7"></td>
        <td class="td1"><input type="submit" name = "visit" value = "5/8/2015"></td>
        <td class="td2"><input type="submit" class="wrap" name = "visit" value = "Eltham Palace"></td>
      </tr>
      <tr>
        <td class="td"><input  type="hidden" name = "id" value = "8"></td>
        <td class="td1"><input type="submit" name = "visit" value = "19/8/2015"></td>
        <td class="td2"><input type="submit" class="wrap" name = "visit" value = "Watts Gallery"></td>
      </tr>
      <tr>
        <td class="td"><input  type="hidden" name = "id" value = "9"></td>
        <td class="td1"><input type="submit" name = "visit" value = "16/9/2015"></td>
        <td class="td2"><input type="submit" class="wrap" name = "visit" value = "Upton House"></td>
      </tr>
      <tr>
        <td class="td"><input  type="hidden" name = "id" value = "10"></td>
        <td class="td1"><input type="submit" name = "visit" value = "22/9/2015"></td>
        <td class="td2"><input type="submit" class="wrap" name = "visit" value = "Salisbury and Braemar House"></td>
      </tr>
      <tr>
        <td class="td"><input  type="hidden" name = "id" value = "12"></td>
        <td class="td1"><input type="submit" name = "visit" value = "11/9/2015"></td>
        <td class="td2"><input type="submit" class="wrap" name = "visit" value = "The Cotswold River Thames Explorer"></td>
      </tr>
      <tr>
        <td class="td"><input  type="hidden" name = "id" value = "13"></td>
        <td class="td1"><input type="submit" name = "visit" value = "14/1/2016"></td>
        <td class="td2"><input type="submit" class="wrap" name = "visit" value = "Lunch in the Clink"></td>
      </tr>
      <tr>
        <td class="td"><input  type="hidden" name = "id" value = "14"></td>
        <td class="td1"><input type="submit" name = "visit" value = "20/1/2016"></td>
        <td class="td2"><input type="submit" class="wrap" name = "visit" value = "&quot;Shoes: Pleasure &amp; Pain&quot; Exhibition at The Victoria &amp; Albert Museum"></td>
      </tr>
      <tr>
        <td class="td"><input  type="hidden" name = "id" value = "15"></td>
        <td class="td1"><input type="submit" name = "visit" value = "26/1/2016"></td>
        <td class="td2"><input type="submit" class="wrap" name = "visit" value = "&quot;Hampstead, a London Village&quot; with City &amp; Village Tours"></td>
      </tr>
      <tr>
        <td class="td"><input  type="hidden" name = "id" value = "16"></td>
        <td class="td1"><input type="submit" name = "visit" value = "29/1/2016"></td>
        <td class="td2"><input type="submit" class="wrap" name = "visit" value = "Visit to The Royal Albert Hall"></td>
      </tr>
      <tr>
        <td class="td"><input  type="hidden" name = "id" value = "19"></td>
        <td class="td1"><input type="submit" name = "visit" value = "4/2/2016"></td>
        <td class="td2"><input type="submit" class="wrap" name = "visit" value = "Two Temple Place, London"></td>
      </tr>
      <tr>
        <td class="td"><input  type="hidden" name = "id" value = "20"></td>
        <td class="td1"><input type="submit" name = "visit" value = "12/2/2016"></td>
        <td class="td2"><input type="submit" class="wrap" name = "visit" value = "Concert at G Live, London Road, Guildford GU21 2AA"></td>
      </tr>
    </table>
  </div>
</form>
</html>

If you are not sure what structure is allowed inside a table then just post the html into the validator and it will let you know where you went wrong :smile:

1 Like

My thanks to PaulOB, tracknut, DarthGuido, felgall and TechnoBear for all your help in solving my problem. I would mark it now closed, if I knew how to do that!

Best wishes to all

Tony Holland

We don’t do that here, so you’re fine.

Just glad we they could help.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.