Member Avatar for Mapper99

Any way I can remove the additional borders created when I nest a table?

Here is the code I am using.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head> 

<style  type="text/css">

#leftcolumn { 
width: 72px; 
height:120px; 
float: left
}

#leftcolumn img {
width:100%;
height:100%;
}

#rightcolumn { 
width: 300px; 
height:120px; 
float: left
}

#rightcolumn table {
width:100%;
height:100%;
}

table
{
border-collapse:collapse;
}
table, td, th
{
border:1px solid black;
}


</style>

<title>Picture beside table</title> 
</head> 
<body> 
<div id="leftcolumn" style="width: 100px; height: 120px">
<img src="alexmiller.jpg"> 
</div>
<div id="rightcolumn" style="width: 420px; height: 120px">

<table width='100%'>

<tr align='left'>
	<td width='20%'>Name:</td>
	<td width='80%'>Alex Miller</td>
</tr> 

<tr align='left'>
	<td colspan='4'>
		<table width='100%'>
			<tr align='left'>
				<td width='25%'>Office Phone:</td>
				<td width='25%'>5</td>
				<td width='25%'>Cell Phone:</td>
				<td width='25%'>6</td>
			</tr>
		</table>
	</td>
</tr> 

<tr align='left'>
	<td colspan='4'>
		<table width='100%'>
			<tr align='left'>
				<td width='25%'>Office ID:</td>
				<td width='25%'>15547</td>
				<td width='25%'>Job Title:</td>
				<td width='25%'>Manager</td>
			</tr>
		</table>
	</td>
</tr>

<tr align='left'>
	<td width='20%'>Email:</td>
	<td width='80%'>alex.miller@hotmal.com</td>
</tr> 

</table>

</div>

</body> 
</html>
  • 3 Contributors
  • 2 Replies
  • 2K Views
  • 20 Hours Discussion Span
  • Latest Post Latest Post by macgurl70
Member Avatar for pwinfrey

Why not use one table and colspan the columns as needed? This method also gives you cleaner and more professional alignment.

<table width="100%">
<tr align="left">
	<td>Name:</td>
	<td colspan="3">Alex Miller</td>
</tr> 
<tr align="left">
	<td>Office Phone:</td>
	<td>5</td>
	<td>Cell Phone:</td>
	<td>6</td>
</tr>
<tr align="left">
	<td>Office ID:</td>
	<td>15547</td>
	<td>Job Title:</td>
	<td>Manager</td>
</tr>
<tr align="left">
	<td>Email:</td>
	<td colspan="3">alex.miller@hotmal.com</td>
</tr> 
</table>
Member Avatar for macgurl70

OH, you have two tables in there without an id - and since the CSS code is targeting "table" it is giving a border to both of them.

Create a separate id for each - and then have the css code reflect which one you want to have a border and which one you dont.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.