Removing `border` attribute from table doesn't remove the border

Question

Why when doing removeAttr("border") the border is not removed (the attribute is removed, but the style remains)?

Demo

$("#button1").on("click", function() {
  $("table").removeAttr("border");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
  <tbody>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
  </tbody>
</table>

<table>
  <tbody>
    <tr>
      <td>Not</td>
      <td>Initially</td>
      <td>Bordered</td>
    </tr>
  </tbody>
</table>

<input type="button" id="button1" value="Click to remove border via JavaScript">

I reproduced this on Chrome and Chromium.

Answer 1

It's not just the border attribute on the element itself you have to worry about.

Every browser comes with a 'default stylesheet` that will configure a base presentation for common HTML elements. Tables are one of those elements that need to have a style set by the site in order to override this "base style" from the browser. Browsers implement this to improve default readability on websites, but it also introduces a device which web developers must be aware of when generating their own stylesheets.

Setting the following rules:

table {
  border: none;
  border-spacing: 0;
  border-collapse: collapse;
}

Will solve this problem for you.

jQuery can remove the attribute, but it won't trigger a redraw of the element when it's removed as opposed to updated. Since there is no overriding style element on the default CSS, the initial style is preserved.

After setting the attribute, you could always clone and re-apply (or simply re-insert the element via something silly like $('table').appendTo($('table').parent()); to see the desired behavior as well.

---

Edit:

Congratulations, you found a Chrome bug

The CSS renderer is still respecting the border attribute even after it's being removed. It shouldn't be. Other browsers, when running the fiddle supplied in the comments, will appropriately remove the border on the element.

However! in Chrome you'll notice this little sucker hanging out on your table with a set border attribute:

Note the table[Attributes Style] empty selector here

Chrome is rendering this table as if it were written this way in your HTML: <table border></table> despite that not reflecting the information in the DOM.

You should definitely submit this to the Chromium Issues List

Check Ismael Miguel's comment below for further explanation, copied here

What I can think of is that Chrome has a bug related to the handling of the border attribute (which is deprecated, unsupported in html5). This might happen because the border attribute isn't linked to the whole CSS style. One example is the value property. When you run element.value=5;, the value attribute will remain the same, but when you put value="6", running element.value will return 6. This relationship might be broken: with the border attribute it sets the color AND the border size. When you remove the attribute, it removes the size only.

Congrats!

Answer 2

You should use

.attr("border", "")

Here is an example jsFiddle