Member Avatar for Member #596162

For some reason I'm getting these dotted lines under my tables in all browsers-

Heres what I'm talking about

Blah blah Content
.............................
Blah more content
.............................
Heres a little more
.............................

I have my table border set to 0. It dont go all the way around it just sits right under it. I put a border around my tables to see if it helped and yet the dotted lines are still there in-between the bordered table content. There horizontal not vertical!

  • 3 Contributors
  • 3 Replies
  • 66 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by jwmollman

Dani AI

Generated

Good catch by — the visible row of dots often turns out not to be a table border at all but a decorative separator coming from elsewhere. Both and pointed in useful directions: check ancestor styles and try isolating table border settings. Below are concise, practical steps and safe fixes to apply when the cause is not obvious.

Start with the browser Developer Tools: inspect the table and the element directly above it, then look at the computed styles for background-*, border-*, and any pseudo-elements (:before / :after). Use the Network or Sources panel to spot small repeating images (or embedded base64 data) that may be drawn as a separator. Temporarily disable CSS rules or external stylesheets to narrow the culprit, and search your codebase for likely filenames or CSS rules that mention separators, repeat, dotted, or hr-like classes.

When you find the rule, prefer removing or replacing the decorative asset with a CSS-only separator (borders or gradients) for better control and fewer assets. A minimal override that avoids touching other layout rules is to clear a background on the specific wrapper (for example, set the element's background to none). Avoid using !important as a first resort; instead target the right selector or fix the source stylesheet. These techniques keep the DOM clean and make future debugging much easier.

Recommended Answers

All 3 Replies

Member Avatar for hielo

perhaps the parent element of the table has the relevant setting - ex:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
#envelope{border-bottom:1px dotted black;}
-->
</style>

</head>
<body>
	<div id="envelope">
	<table summary="">
		<tr>
		<td>x</td>
		</tr>
	</table>
	</div>
</body>
</html>
Member Avatar for Member #596162

I figured it out... It was a repeating dot image thats suppose to separate the content that I didn't see. Looks so much better. Thanks for any input!

Member Avatar for jwmollman

What I'm about to post is probably what you already know, but when I tried the following code, I got no borders on the table.

<html>
	<head>
		<title>My Title</title>
	</head>
	
	<body>
		<table border="none">
			<tr>
				<td>Some content</td>
			</tr>
			<tr>
				<td>Some content</td>
			</tr>
			<tr>
				<td>Some content</td>
			</tr>
		</table>
	</body>
</html>

I hope that helps.

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.