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

Dani AI

Generated

the double lines come from giving a border to both the parent cell and the nested table/cells. border-collapse only resolves conflicts inside a single table; it does not collapse a table’s borders with the border on the containing <td>, so you end up seeing two strokes at the junction. See the property’s scope in MDN’s border-collapse docs.

+1 to : flattening to one table with colspan is the cleanest fix and usually aligns best. If you really need nesting, is spot on about scoping your CSS so the inner table is styled differently.

A practical pattern is to remove the nested table’s outer box and draw only its internal dividers, letting the outer cell supply the perimeter. Add classes and target just what you need:

/* outer table */
.table { border-collapse: collapse; }
.table td, .table th { border: 1px solid #000; }

/* nested table: no outer border, only inner lines */
.subtable { border-collapse: collapse; border: 0; }
.subtable td { border: 0; }
.subtable td + td { border-left: 1px solid #000; }   /* vertical dividers */
.subtable tr + tr td { border-top: 1px solid #000; } /* horizontal dividers */

/* optional: if you want the subtable box instead, drop the parent cell border */
.no-border { border: 0; padding: 0; }
<table class="table">
  <tr>
    <td class="no-border">
      <table class="subtable">...</table>
    </td>
  </tr>
</table>

The td + td and tr + tr selectors add borders only after the first column/row, avoiding a second line at the edges. That pattern uses the adjacent sibling combinator, documented here: Adjacent sibling combinator (+). If you ever switch to border-collapse: separate, also set border-spacing: 0 to avoid gaps between cells, per MDN’s border-spacing.

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.