competing CSS stylesheets - html

Question

I'm trying to remove the borders on a specific table:
<table class="teacher">
<tr>
<td>row 1</td>
<td>col 1</td>
<td>col 2</td>
</tr>
<tr>
<td>row 2</td>
<td>col 1</td>
<td>col 2</td>
</tr>
</table>
You can see my fiddle here
I think the bootstrap.css is competing with my site.css but I'm not sure how to get rid of the borders?
Here is my teacher (from site.css) styling:
.teacher {
text-align: left;
padding: 0;
}
.teacher table {
border: none !important;
border-collapse:collapse !important;
}
.teacher .contentLabel {
width: 45%;
}
.teacher input {
width: 10px;
padding: 0px;
}
.teacher textarea {
width: 225px;
padding: 0px;
}
My bundle:
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/site.css",
"~/Content/bootstrap.css",
"~/Content/bootstrap-theme.css",
"~/Content/bootstrap-duallistbox.css",
"~/Content/jquery.dataTables.css"));
I think this is what is causing this issue from bootstrap:
.table {
width: 100%;
margin-bottom: 20px;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
padding: 8px;
line-height: 1.428571429;
vertical-align: top;
border-top: 1px solid #ddd;
}
.table > thead > tr > th {
vertical-align: bottom;
border-bottom: 2px solid #ddd;
}
.table > caption + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > th,
.table > thead:first-child > tr:first-child > th,
.table > caption + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > td,
.table > thead:first-child > tr:first-child > td {
border-top: 0;
}
.table > tbody + tbody {
border-top: 2px solid #ddd;
}
.table .table {
background-color: #fff;
}

Answer 1

Comment out the border for <td> in Line 94.
td {
color: #000;
/* border: 1px solid #7c7c7b; */
padding: .3em 1em;
text-align: left;
}
Additional pieces of CSS to keep in mind if you ever use <thead> and <th> elements for tables:
Line 103:
th {
color: #7c7c7b;
font-weight: 700;
font-size: large;
text-align: center;
/* border: 1px solid #7c7c7b; */
padding: .3em 1em;
}
Line 112:
th.th2 {
color: #7c7c7b;
font-weight: 300;
font-size: large;
text-align: center;
/* border: 1px solid #7c7c7b; */
padding: .3em 1em;
}

Answer 2

Well on line 90 in the CSS of the jsfiddle you provided is
td {
color: #000;
border: 1px solid #7c7c7b;
padding: .3em 1em;
text-align: left;
}
that is what is causing the borders..
So the rule is on the td elements and not the table
Using
.teacher td{border:none;}
should solve it..
Demo at http://jsfiddle.net/gaby/R6X2M/2/