CSS table row border not showing correctly in chrome and IE

Question

I have created a simple table with bottom row borders. In Firefox it works perfectly, and borders are being shown in the whole row, but in Chrome and IE 10 it shows only on part of the row :

<div style="display:table; border-collapse: collapse; width: 100%"> <div style="display:table-row; border-bottom: 1px solid black;"> <div style="display:table-cell;">a </div> <div style="display:table-cell; width: 15%;">b </div> </div> <div style="display:table-row; border-bottom: 1px solid black;"> <div style="display:table-cell; width: 15%;">a </div> <div style="display:table-cell; width: 15%;">c </div> </div> <div style="display:table-row; border-bottom: 1px solid black;"> <div style="display:table-cell;">a </div> <div style="display:table-cell; width: 15%;">b </div> <div style="display:table-cell; width: 15%;">c </div> </div> </div>

fiddle link

Maybe someone know how to fix this problem?

(A) in-line styling is horrible (B) You haven't actually said whats wrong/desired clearly and (C) I believe it to be working exactly as it should be? — jbutler483
– jbutler483, Commented Dec 17, 2014 at 13:27
I have said that borders are not showed to whole row, it is being showed only to part of the row. — kuldarim
– kuldarim, Commented Dec 17, 2014 at 13:30
I don't see a table at all! I see a div doing exactly as it should be, given the properties you have given it. If you want a 'bottom border', why don't you just add a hr tag? — jbutler483
– jbutler483, Commented Dec 17, 2014 at 13:31
What you are trying to do is to emulate table cell collspan. Unlikely you will succeed, though. It's much simpler to use normal table. — dfsq
– dfsq, Commented Dec 17, 2014 at 13:34

Weafs.py · Accepted Answer · 2014-12-17 13:27:15Z

Add empty divs.

<div style="display:table; border-collapse: collapse; width: 100%"> <div style="display:table-row; border-bottom: 1px solid black;"> <div style="display:table-cell;">a</div> <div style="display:table-cell; width: 15%;">b</div> <div style="display:table-cell; width: 15%;"></div> </div> <div style="display:table-row; border-bottom: 1px solid black;"> <div style="display:table-cell; width: 15%;">a</div> <div style="display:table-cell; width: 15%;">c</div> <div style="display:table-cell; width: 15%;"></div> </div> <div style="display:table-row; border-bottom: 1px solid black;"> <div style="display:table-cell;">a</div> <div style="display:table-cell; width: 15%;">b</div> <div style="display:table-cell; width: 15%;">c</div> </div> </div>

Note: Haven't tested on IE.

Collectives™ on Stack Overflow

CSS table row border not showing correctly in chrome and IE

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related