CSS Reset table to default equivalent

Question

I am working with a pre-made bought template, where the author of said template wired things together in such a way where its next to impossible sometimes to get something the way you want, in this case I have a table I am trying to put in to a section of the template, that I don't need or want styled the way they have the template do it. However because of how they did it I can't just go altering the CSS to do something else. I have tried classing the table as something else and styling it the way I want, but there's something that always manages to get snagged somewhere and the author's style persists on one piece or another of the table. So with that I came up with the idea, why not make a reset like class specific to tables that I can call this class in first on the element, then the class I want it to be styled under e.g.:

class="reset_table mynew_style"

So I am trying to come up with a means of doing it, but am getting stuck.

.reset_table, 
.reset_table table tr,
.reset_table tr td,
.reset_table table tbody,
.reset_table table thead,
.reset_table table tfoot,
.reset_table table tr th,
.reset_table table tfoot tr tf
{
    margin:0;
    padding:0;
    background:none;
    border:none;
    border-collapse:collapse;
    border-spacing:0;
    background-image:none;
}

Now this seems to work almost completely, there's still some things persisting. So I'm hoping someone here can help me come up with a better variation of this. So all bases are covered in the sense of trying to reset a table back to normal default style.

Answer 1

It's an old thread, but in case this is helps someone else:

.clear-user-agent-styles table,
.clear-user-agent-styles thead,
.clear-user-agent-styles tbody,
.clear-user-agent-styles tfoot,
.clear-user-agent-styles tr,
.clear-user-agent-styles th,
.clear-user-agent-styles td {
    display: block;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: none;
    border-collapse: inherit;
    border-spacing: 0;
    border-color: inherit;
    vertical-align: inherit;
    text-align: left;
    font-weight: inherit;
    -webkit-border-horizontal-spacing: 0;
    -webkit-border-vertical-spacing: 0;
}
th, td {
    display: inline;
}

If it's still not overriding other dev styles, make sure you have this code after theirs, or be more specific by including the parent class, or even ID if you need to. Try, to avoid appending !important to the end of each property's value, but that would mostly likely trump what was coded previously.