Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

css forms within td margin / padding problem 1

Status
Not open for further replies.
normm

normm

Programmer
Dec 9, 2004
46
GB
Hi all, I'm having a little bit of a problem making my table look as intended. I am attempting to make a table to display data with a fixed header. After adapting the example at
for my purposes I have inserted some form elements into the table - everything works fine other than the huge gap left between 2 form elements in the same <td>.

In the case of 2 buttons in the same <td> element I would like to have a gap of maybe 1 or 2 px.

I'm not massively skilled when it comes to CSS but have tried adding margin / padding attributes of 0px to the button and td elements to no avial.

any help greatfully recieved - code follows.

Code: 
<style type="text/css">
div.tableContainer {
	width:800px;
	height: 295px; 	/* must be greater than tbody*/
	overflow: auto;
	margin: 0 auto;
	}

table {
	border: none;
	background-color: #f7f7f7;
	}
	
table>tbody	{  /* child selector syntax which IE6 and older do not support*/
	overflow: auto; 
	height: 250px;
	overflow-x: hidden;
	}
	
thead tr	{
	position:relative; 
	top: expression(offsetParent.scrollTop); /*IE5+ only*/
	}
	
thead td, thead th {
	text-align: center;
	font-size: 12px; 
	background-color: #e9e2d3;
	color: steelblue;
	font-weight: bold;
	border-top: solid 1px #d8d8d8;
	}	
	
td	{
	color: #000;
	padding-right: 2px;
	font-size: 13px;
	text-align: right;
	border-bottom: solid 1px #d8d8d8;
	border-left: solid 1px #d8d8d8;
	}
	
table tfoot tr { /*idea of Renato Cherullo to help IE*/
      position: relative; 
      overflow-x: hidden;
      top: expression(parentNode.parentNode.offsetHeight >= 
	  offsetParent.offsetHeight ? 0 - parentNode.parentNode.offsetHeight + offsetParent.offsetHeight + offsetParent.scrollTop : 0);
      }


tfoot td	{
	text-align: center;
	font-size: 10px;
	font-weight: bold;
	background-color: #e9e2d3;
	color: steelblue;
	border-top: solid 1px slategray;
	}

.tbl_btn {
	width:45px;
	text-align: center;
	font-size: 10px;
	font-weight: bold;
	background-color: #e9e2d3;
	color: steelblue;
	margin:0px;
}

td:last-child {padding-right: 20px;} /*prevent Mozilla scrollbar from hiding cell content*/

.evenrow {
	background:Cornsilk;
	border-top: solid 1px slategray;
}

.evenrow td {
	border-top: solid 1px black;
	border-bottom: solid 1px black;
}
</style>

<div class="tableContainer" id="1">
<table cellspacing="0" width="780px">
	<thead>
		<tr>
			<td>&nbsp;</td>
			<td>Registration Number</td>
			<td>Surname</td>
			<td>First Name</td>
			<td>NHS No</td>
			<td>dob</td>
			<td>Address Records</td>
			<td>Diagnosis Records</td>
			<td>Clinical Records</td>
			<td>Hospital Records</td>
			<td>GP Records</td>
			<td>Relationship Records</td>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<td colspan="12">Footer</td>
		</tr>
	</tfoot>
	<tbody>
		<tr class="oddrow">
			<td>
				<form method="post" action="index.php?do=u_pat&p_id=760">
					<button class="tbl_btn" type="submit">Select</button>
				</form>
			</td>
			<td>762</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>------</td>
			<td>&nbsp;</td>
			<td>
				<form method="post" action="index.php?do=b_addr&p_id=760">
					<button class="tbl_btn" type="submit">View</button>
				</form>
				<form method="post" action="index.php?do=i_addr&p_id=760">
					<button class="tbl_btn" type="submit">Insert</button>
				</form>
			</td>
			<td>
				<form method="post" action="index.php?do=b_diag&p_id=760">
					<button class="tbl_btn" type="submit">View</button>
				</form>
				<form method="post" action="index.php?do=i_diag&p_id=760">
					<button class="tbl_btn" type="submit">Insert</button>
				</form>
			</td>
			<td>
				<form method="post" action="index.php?do=b_clin&p_id=760">
					<button class="tbl_btn" type="submit">View</button>
				</form>
				<form method="post" action="index.php?do=i_clin&p_id=760">
					<button class="tbl_btn" type="submit">Insert</button>
				</form>
			</td>
			<td>
				<form method="post" action="index.php?do=b_pch&p_id=760">
					<button class="tbl_btn" type="submit">View</button>
				</form>
				<form method="post" action="index.php?do=i_pch&p_id=760">
					<button class="tbl_btn" type="submit">Insert</button>
				</form>
			</td>
			<td>
				<form method="post" action="index.php?do=i_p_gp&p_id=760">
					<button class="tbl_btn" type="submit">Insert</button>
				</form>
			</td>
			<td>
				<form method="post" action="index.php?do=i_rel&p_id=760">
					<button class="tbl_btn" type="submit">Insert</button>
				</form>
			</td>
		</tr>
		<tr class="evenrow">
			<td>
				<form method="post" action="index.php?do=u_pat&p_id=760">
					<button class="tbl_btn" type="submit">Select</button>
				</form>
			</td>
			<td>762</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>--------</td>
			<td>&nbsp;</td>
			<td>
				<form method="post" action="index.php?do=b_addr&p_id=760">
					<button class="tbl_btn" type="submit">View</button>
				</form>
				<form method="post" action="index.php?do=i_addr&p_id=760">
					<button class="tbl_btn" type="submit">Insert</button>
				</form>
			</td>
			<td>
				<form method="post" action="index.php?do=b_diag&p_id=760">
					<button class="tbl_btn" type="submit">View</button>
				</form>
				<form method="post" action="index.php?do=i_diag&p_id=760">
					<button class="tbl_btn" type="submit">Insert</button>
				</form>
			</td>
			<td>
				<form method="post" action="index.php?do=b_clin&p_id=760">
					<button class="tbl_btn" type="submit">View</button>
				</form>
				<form method="post" action="index.php?do=i_clin&p_id=760">
					<button class="tbl_btn" type="submit">Insert</button>
				</form>
			</td>
			<td>
				<form method="post" action="index.php?do=b_pch&p_id=760">
					<button class="tbl_btn" type="submit">View</button>
				</form>
				<form method="post" action="index.php?do=i_pch&p_id=760">
					<button class="tbl_btn" type="submit">Insert</button>
				</form>
			</td>
			<td>
				<form method="post" action="index.php?do=i_p_gp&p_id=760">
					<button class="tbl_btn" type="submit">Insert</button>
				</form>
			</td>
			<td>
				<form method="post" action="index.php?do=i_rel&p_id=760">
					<button class="tbl_btn" type="submit">Insert</button>
				</form>
			</td>
		</tr>
		<tr class="oddrow">
			<td>
				<form method="post" action="index.php?do=u_pat&p_id=760">
					<button class="tbl_btn" type="submit">Select</button>
				</form>
			</td>
			<td>762</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>--------</td>
			<td>&nbsp;</td>
			<td>
				<form method="post" action="index.php?do=b_addr&p_id=760">
					<button class="tbl_btn" type="submit">View</button>
				</form>
				<form method="post" action="index.php?do=i_addr&p_id=760">
					<button class="tbl_btn" type="submit">Insert</button>
				</form>
			</td>
			<td>
				<form method="post" action="index.php?do=b_diag&p_id=760">
					<button class="tbl_btn" type="submit">View</button>
				</form>
				<form method="post" action="index.php?do=i_diag&p_id=760">
					<button class="tbl_btn" type="submit">Insert</button>
				</form>
			</td>
			<td>
				<form method="post" action="index.php?do=b_clin&p_id=760">
					<button class="tbl_btn" type="submit">View</button>
				</form>
				<form method="post" action="index.php?do=i_clin&p_id=760">
					<button class="tbl_btn" type="submit">Insert</button>
				</form>
			</td>
			<td>
				<form method="post" action="index.php?do=b_pch&p_id=760">
					<button class="tbl_btn" type="submit">View</button>
				</form>
				<form method="post" action="index.php?do=i_pch&p_id=760">
					<button class="tbl_btn" type="submit">Insert</button>
				</form>
			</td>
			<td>
				<form method="post" action="index.php?do=i_p_gp&p_id=760">
					<button class="tbl_btn" type="submit">Insert</button>
				</form>
			</td>
			<td>
				<form method="post" action="index.php?do=i_rel&p_id=760">
					<button class="tbl_btn" type="submit">Insert</button>
				</form>
			</td>
		</tr>
		<tr class="evenrow">
			<td>
				<form method="post" action="index.php?do=u_pat&p_id=760">
					<button class="tbl_btn" type="submit">Select</button>
				</form>
			</td>
			<td>762</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>---------</td>
			<td>&nbsp;</td>
			<td>
				<form method="post" action="index.php?do=b_addr&p_id=760">
					<button class="tbl_btn" type="submit">View</button>
				</form>
				<form method="post" action="index.php?do=i_addr&p_id=760">
					<button class="tbl_btn" type="submit">Insert</button>
				</form>
			</td>
			<td>
				<form method="post" action="index.php?do=b_diag&p_id=760">
					<button class="tbl_btn" type="submit">View</button>
				</form>
				<form method="post" action="index.php?do=i_diag&p_id=760">
					<button class="tbl_btn" type="submit">Insert</button>
				</form>
			</td>
			<td>
				<form method="post" action="index.php?do=b_clin&p_id=760">
					<button class="tbl_btn" type="submit">View</button>
				</form>
				<form method="post" action="index.php?do=i_clin&p_id=760">
					<button class="tbl_btn" type="submit">Insert</button>
				</form>
			</td>
			<td>
				<form method="post" action="index.php?do=b_pch&p_id=760">
					<button class="tbl_btn" type="submit">View</button>
				</form>
				<form method="post" action="index.php?do=i_pch&p_id=760">
					<button class="tbl_btn" type="submit">Insert</button>
				</form>
			</td>
			<td>
				<form method="post" action="index.php?do=i_p_gp&p_id=760">
					<button class="tbl_btn" type="submit">Insert</button>
				</form>
			</td>
			<td>
				<form method="post" action="index.php?do=i_rel&p_id=760">
					<button class="tbl_btn" type="submit">Insert</button>
				</form>
			</td>
		</tr>
	</tbody>
</table>
 
Sort by date Sort by votes
Thanks Chris,

Mental block - I am officialy dumb!

worked first time.

again thanks!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
686
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
355
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
281
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
310
PeDa
PeDa
tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
127
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top