CSS Reset question

Question

I have a reset.css file that includes the following declaration: border:0 none;

So when I make a table like this:

<table border="1">

The border does not show up. How do I get the border to show up without removing the border:0 none; property? The code must be <table border="1">. Is there a way to make the table "ignore" the reset.css file? (This must work across all browsers as well including IE 6+)

Answer 1

Add a style="border: 1px solid;" to the <table> tag. Styles override attribute settings.

Answer 2

directly after your reset css add a line like this:

table.borderIgnore { border:auto; }

then for your table do this:

<table class="borderIgnore" border="1">

let me know if that works

Answer 3

Ok, so lets say you are in a jam, and lets assume:

• You can't do anything suggested above
• You can't use inline styles

• You can't add a style to your html doc like:

  <style type="text/css">
    table { border: 1px solid; }
  </style>
  

• You can't add a link to another stylesheet

Could you do something which is probably overkill, like use some javascript or jquery to do it?

<script type='text/javascript'>
  var tableStyle = "table { border: 1px solid;}";

  function appendStyle(tableStyle) {
    var css = document.createElement('style');
    css.type = 'text/css';

    if (css.styleSheet) css.styleSheet.cssText = tableStyle;
    else css.appendChild(document.createTextNode(tableStyle));

    document.getElementsByTagName("head")[0].appendChild(css);
  };

  window.onload = function() { 
    appendStyle(tableStyle); 
  };
</script>

Answer 4

I have the same problem. I want the reset to apply to new content, but I have several thousand old pages relying on the browser default. I can't make the assumption that all of the legacy tables should get a border