Question

i have a problem with html and css.
i have a html file with a css file attached and in the css file i have s.th. like:

    table { background: #fff; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; margin: 0 0 18px; border: 1px solid #ddd;  }

    table thead, table tfoot { background: #f5f5f5; }
    table thead tr th,
    table tfoot tr th,
    table tbody tr td,
    table tr td,
    table tfoot tr td { font-size: 12px; line-height: 18px; text-align: left; }
    table thead tr th,
    table tfoot tr td { padding: 8px 10px 9px; font-size: 14px; font-weight: bold; color: #222; }
    table thead tr th:first-child, table tfoot tr td:first-child { border-left: none; }
    table thead tr th:last-child, table tfoot tr td:last-child { border-right: none; }

    table tbody tr.even,
    table tbody tr.alt { background: #f9f9f9; }
    table tbody tr:nth-child(even) { background: #f9f9f9; }
    table tbody tr td { color: #333; padding: 9px 10px; vertical-align: top; border: none; }

that is a default theme. its nice for all the tables.

but now i want to add a standart non css formated table in my web project so i write:

<table> ... </table>

this table gets formated with the css. what can i do, to prevent this table getting formated with the css just showing it with the normal default style?

Answer 1

You will need to give each table a separate class and then style them separately.

For example your html could be

<table class="example1>
  <tr>
    <td>

    </td>
  </tr>
</table>

<table class="example2>
  <tr>
    <td>

    </td>
  </tr>
</table>

and your CSS could be

table.example1
{
  YOUR CSS
}    

table.example2
{
  YOUR CSS
}