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
  • 1K Views
  • 20 Hours Discussion Span
  • Latest Post Latest Post by macgurl70

Recommended Answers

All 2 Replies

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.