CODEWITHSUNDEEP
htmlcssfirefox
user541686
user541686

Reputation: 210372

Why do I see a spurious border in this <td> table cell in Firefox?

Why do I see a red strike through in the XXX when I view the following in Firefox 55 (Windows)?

<html>
	<head>
		<style type="text/css">
			table { border-collapse: collapse; }
			.n { border-top: 1px solid red; }
		</style>
	</head>
	<body>
		<table>
			<thead>
				<tr><th>000</th><th>111</th></tr>
			</thead>
			<tbody>
				<tr><td>AAA</td><td rowspan="2">BBB</td></tr>
				<tr><td class="n">CCC</td></tr>
				<tr><td>DDD</td><td rowspan="2">XXX</td></tr>
				<tr><td class="n">FFF</td></tr>
				<tr><td>GGG</td><td>HHH</td></tr>
			</tbody>
		</table>
	</body>
</html>

Screenshot

Upvotes: 0

Views: 63

Answers (2)

Nishesh Pratap Singh
Nishesh Pratap Singh

Reputation: 2181

This is a known bug in Firefox, please visit https://bug98304.bugzilla.mozilla.org/show_bug.cgi?id=608531 for more info

Extra tr at the end is causing this issue.

Try removing last 

<tr></tr>

Upvotes: 1

I_Al-thamary
I_Al-thamary

Reputation: 3993

It is the (FireFox) problem. Try to change border-collapse property values from collapse to inherit;

 <html>
   <head>
    <style type="text/css">
        table { border-collapse: inherit; }
        .n { border-top: 1px solid red; }

    </style>
</head>
<body>
    <table>
        <thead>
            <tr><th>000</th><th>111</th></tr>
        </thead>
        <tbody>


            <tr><td>AAA</td><td  rowspan="2">BBB</td></tr>
            <tr><td class="n">CCC</td></tr>

            <tr><td>DDD</td><td  rowspan="2">XXX</td></tr> 
                <tr><td class="n">FFF</td></tr>
            <tr><td>GGG</td><td>HHH</td></tr>
        </tbody>
    </table>
</body>

Upvotes: 0

Related Questions