Html Question posted in
Some basic documentation can be found here.

Html – why border-collapse property is working on non-table element

I have created a div having two divs and I haven’t used display:table property then why border-collapse property is still working

#tab {
  border: 2px solid black;
  border-collapse: separate;
  border-spacing: 2px;
}

.row {
  display: table-row;
}

.data {
  display: table-cell;
  border: 2px solid;
}

table {
  border: 2px solid;
}

td,
tr {
  display: block;
  padding: 0px;
}
<div id="tab">
  <div class="row">
    <div class="data">Lorem, ipsum.</div>
    <div class="data">Lorem, ipsum.</div>
  </div>
</div>

I don’t expect it to work like that so please explain me why it is working and on which case the border-collapse property work (it is not table but still it is working)

Tags:

2

Answers


  1. 0

    Specifically, by setting border-collapse: separate;, you are telling the table elements (.row and .data) to render their borders independently. And by also setting border-spacing: 2px, you are putting 2px of space between those independently rendered borders.

    So in summary, border-collapse and border-spacing apply to any elements with table display, not just the outermost table element. So even though #tab is not a table itself, the inner elements have table display, so the table border properties still apply.

    Login or Signup to reply.
  2. 0

    You have told your elements to act like table row and cells with CSS:

    .row {
 display: table-row;
}

.data {
  display: table-cell;
  border: 2px solid;
}

    Therefore, the border-collapse: separate; affects them as being table row and table cell. Setting display is enough for the browser to treat them accordingly.

    What exactly is your question? The lack of table and tr,td elements? Well, those would add both the SEMANTICS and SYNTAX and the correct DISPLAY property of the element.

    But when deciding on how to apply the CSS the browser does not check all of those but only the explicit or implicit CSS.

    For example, I assume it is well known to you that span is presented differently from a div when deciding how do they take space on the screen. This is due to IMPLICIT CSS that states that span is displayed as inline and the div as block.
    You can change that, see for yourself, add display: inline for the div and display: block for the span.

    The correct semantics is there to assist humans and page readers for the visually impaired. It can be used by the parsers etc you put on top of the code for whatever reason (testing, documentation..). It also brings the implicit CSS rules, as I have demonstrated.
    So with correct semantics you get a sort of 3 for 1, this is why it is there and recommended being used.

    Yes, you can make most of the page with only spans if you apply proper CSS to them, they would look a and act like they are of the correct syntax. Arguably, you can even replace forms and inputs etc. with enough JS code ‘trigerrable’ by spans. In fact this is the way some of the common elements like drop down menu or accordion are made. You see them everywhere, but there is NO HTML element for them.

    Is it a good practice to do all parts of the page with JS and CSS by only spamming span elements? NO, do not take the fact that I said "You can" and interpret it as "You should".

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search