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>
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.
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:
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 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.
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>
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>
<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 = ""Shoes: Pleasure & Pain" Exhibition at The Victoria & 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 = ""Hampstead, a London Village" with City & 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>
@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.
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 = ""Shoes: Pleasure & Pain" Exhibition at The Victoria & 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 = ""Hampstead, a London Village" with City & 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
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!
