Comments on: border-collapse

By: Mohamed 3mara

Mohamed 3mara — Tue, 05 Jul 2022 11:34:32 +0000

thank you for your Article, if i want to remove border spacing between head & body of table.
how can i do that ?

By: Chintan rabadiya

Chintan rabadiya — Thu, 22 Aug 2019 07:37:55 +0000

In reply to Simon. Which library you use for make sort command. Just like ul>li

By: Ruslan

Ruslan — Fri, 22 Dec 2017 15:45:09 +0000

A2D, nice solution thanks! Needed the “position: relative” on td for it to work.

By: Kaushik Bhadani

Kaushik Bhadani — Tue, 18 Oct 2016 18:53:31 +0000

i have same issue like milap had, i am not sure milap get solution for this but i have the same issue Hi, I am using a mobile responsive free WordPress theme that some how removes the table border of any HTML table. I tried to specify the border in this way

table class=”aligncenter” border=”1″ cellspacing=”1″ cellpadding=”1″ align=”center”>

in posts, still, the border is now showing up. I found the following code in the source code or rather in the styles.css file

table {
border-collapse: collapse;
}

I tried to override that with

table {
border-collapse: separate;
border-spacing: 1px;
}

But it’s not working. Would you please tell me what’s exact reason behind this. Thanks in advance!

By: Brandie

Brandie — Tue, 16 Aug 2016 19:37:53 +0000

Hi all, I work in a CMS on our website and recently learned (taught myself) to work in the source code which has helped me make things much more consistent! I noticed this with a table in this link https://www.brattbank.com/hours-holidays.htm and tried to go into fix it, but I cannot see this issue in the code; here is the "Main Office part of the code that clearly shows as messed up, both in IE and in Chrome. Any advice? table border="0" cellpadding="1" cellspacing="1" style="height:80px; width:511px"> Main Office M-F Sat.

By: Herman

Herman — Wed, 13 Apr 2016 14:23:59 +0000

In reply to Sagan Internet Marketing. Any idea to make that work on just the tr:hover (to highlight with a border around the whole row, not each individual cell) ?

By: A2D

A2D — Sun, 10 Apr 2016 09:32:55 +0000

In reply to Sagan Internet Marketing. Great idea, but doesn't work if you want to highlight a specific cell by changing border color - think of highlighting "today" in a calendar. Don't ask why, that's the design... Had to do something like this to create the "missing" top border:

/* assuming a 2px border around cells and highlight bordercolor #c00 */
.highlighted_cell {
    border-color: #c00;
}
.highlighted_cell:before {
    content: "";
    position: absolute;
    border: 1px solid #c00;
    top: -2px;
    left: -2px;
    width: calc(100% + 4px);
}

By: Joshua Ballesteros

Joshua Ballesteros — Thu, 03 Dec 2015 12:31:20 +0000

I’ve use a table and the border-radius the corner. Problem is when it is collapse border radius is not working.

—— ads ——-
My Website http://www.microuniver.com

By: Guillaume Bois

Guillaume Bois — Thu, 28 May 2015 19:22:50 +0000

Could be cool also if you add the default example (seperate and spacing 0) which is funny because it is the ugliest of all possible solution!

By: RoyD

RoyD — Fri, 20 Mar 2015 15:37:08 +0000

In reply to Manidip Banerjee. Mandip, did you get a reply to this issue? I have a similar problem with WordPress and would welcome a solution

By: Ben

Ben — Tue, 24 Feb 2015 09:28:09 +0000

In reply to Sagan Internet Marketing. Awesome idea man - came here looking for exactly a solution to this problem, Cheers

By: Muhammad Tayyab

Muhammad Tayyab — Tue, 11 Nov 2014 17:31:47 +0000

nice article (Y) it help me alot to solve my confusion about collapse and separate. it is very informative and best website for web developing.
Keep it up bro . :)

By: Fesh

Fesh — Thu, 19 Jun 2014 14:28:18 +0000

There is an issue with border-collapse: collapse that has a rowspan on Firefox. The URL for the bug is at https://bugzilla.mozilla.org/show_bug.cgi?id=332740

By: Gerson L

Gerson L — Fri, 02 May 2014 03:13:32 +0000

Awesome, just what I was looking for!

By: Manidip Banerjee

Manidip Banerjee — Sun, 23 Feb 2014 18:23:01 +0000

Hi, I am using a mobile responsive free WordPress theme that some how removes the table border of any HTML table. I tried to specify the border in this way

table class=”aligncenter” border=”1″ cellspacing=”1″ cellpadding=”1″ align=”center”>

in posts, still, the border is now showing up.

I found the following code in the source code or rather in the styles.css file

table {
border-collapse: collapse;
}

I tried to override that with

table {
border-collapse: separate;
border-spacing: 1px;
}

But it’s not working. Would you please tell me what’s exact reason behind this.
Thanks in advance!