I have a simple table, where I want to remove specific borders on td tag
Table replication:
#page {
background: #ffffff;
width: 878px;
margin: 0 auto;
margin-top: 10px;
display: block;
border: 1px solid #c4c7c7;
padding: 20px 20px 25px 20px;
position: relative;
z-index: 0;
font-family: Arial;
}
.br {
display: block;
margin-bottom: 0em;
}
.brmedium {
display: block;
margin-bottom: 1em;
}
.brlarge {
display: block;
margin-bottom: 2em;
}
.documentTitle {
text-align: right;
}
.textCenter {
text-align: center;
}
.numericText {
font-size: 26px;
font-family: Arial;
padding: 10px;
}
.square {
width: 30px;
height: 30px;
border: 1px solid;
margin: auto;
}
.yesNoSquare {
width: 10px;
height: 10px;
border: 1px solid;
display: inline-block;
}
.yesNoSquare-space {
padding-right: 20px;
}
.yesNoSquare-cross {
height: 10px;
width: 10px;
position: relative;
border: 1px solid;
display: inline-block;
}
.yesNoSquare-cross:after {
position: absolute;
top: -45px;
bottom: 0;
left: -1.5px;
right: 0;
content: "\2715";
line-height: 100px;
text-align: center;
color: #000000;
}
td {
vertical-align: top;
}
.tableTitle {
font-weight: bold;
font-size: 10px;
}
.tableText {
font-size: 12px;
}
.remove-border {
border: 0px solid #ffffff;
}
.commercialTable {
border-collapse: collapse;
width: 100%;
/*vertical-align: top;*/
}
.commercialTable-space {
padding-left: 15px;
}
.commercialTable tr, .commercialTable td {
border: 1px solid #000;
/*vertical-align: top;*/
}
.itemsTableHeader {
font-size: 10px;
}
.itemsTableTitle {
font-size: 16px;
}
.itemTableSpace {
padding-left: 15px;
}
.packagingDescriptionText {
font-size: 14px;
}
.alignMiddle {
vertical-align: middle;
}
.footerMarkText {
font-size: 12px;
}
.footerSignature {
font-size: 14px;
}<body>
<div id="page">
<h3 class="documentTitle">Test Test</h3>
<table class="commercialTable">
<tbody>
<tr>
<td colspan="9" class="textCenter">
<span class="tableTitle">test test test test</span>
</td>
</tr>
<tr>
<td rowspan="2"></td>
<td rowspan="2" class="textCenter">
<span class="itemsTableHeader br">test. g</span>
<span class="itemsTableHeader br">ttest</span>
</td>
<td colspan="3" class="textCenter">
<span class="itemsTableHeader">17. test, test test test, test, test test test</span>
</td>
<td rowspan="2" class="textCenter">
<span class="itemsTableHeader br">21</span>
<span class="itemsTableHeader">test test</span>
</td>
<td rowspan="2" class="textCenter">
<span class="itemsTableHeader br">22</span>
<span class="itemsTableHeader">test test (lb)</span>
</td>
<td rowspan="2" colspan="2" class="textCenter">
<span class="itemsTableHeader br">23</span>
<span class="itemsTableHeader">test (test test, test test)</span>
</td>
</tr>
<tr>
<td class="textCenter">
<span class="itemsTableHeader br">18. test test</span>
<span class="itemsTableHeader">test test</span>
</td>
<td class="textCenter">
<span class="itemsTableHeader br">19. test</span>
<span class="itemsTableHeader">test test test</span>
</td>
<td class="textCenter">
<span class="itemsTableHeader br">20. test test</span>
<span class="itemsTableHeader">(Kilos)</span>
</td>
</tr>
<tr>
<td rowspan="2" class="numericText textCenter alignMiddle">1</td>
<td class="alignMiddle" rowspan="2">
<div class="square" />
</td>
<td class="itemsTableTitle itemTableSpace" colspan="2">test test test</td>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
<td class="itemTableSpace">{{test}}</td>
<td colspan="2" class="itemTableSpace">{{test}}</td>
</tr>
<tr>
<td class="itemsTableTitle itemTableSpace">7318.15.50</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="2" class="numericText textCenter alignMiddle">2</td>
<td class="alignMiddle" rowspan="2">
<div class="square" />
</td>
<td class="itemsTableTitle itemTableSpace" colspan="2">test test-test test</td>
<td rowspan="2"> </td>
<td> </td>
<td class="itemTableSpace">{{test}}</td>
<td colspan="2" class="itemTableSpace">{{test}}</td>
</tr>
<tr>
<td class="itemsTableTitle itemTableSpace">8302.41.60</td>
<td> </td>
<td> </td>
<td> </td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2" class="numericText textCenter alignMiddle">3</td>
<td class="alignMiddle" rowspan="2">
<div class="square" />
</td>
<td class="itemsTableTitle itemTableSpace" colspan="2">test test test</td>
<td rowspan="2"> </td>
<td> </td>
<td class="itemTableSpace">{{test}}</td>
<td colspan="2" class="itemTableSpace">{{test}}</td>
</tr>
<tr>
<td class="itemsTableTitle itemTableSpace">7318.22.00</td>
<td> </td>
<td> </td>
<td> </td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2" class="numericText textCenter alignMiddle">4</td>
<td rowspan="2" class="alignMiddle">
<div class="square" />
</td>
<td class="itemsTableTitle itemTableSpace" colspan="2">test test</td>
<td rowspan="2"> </td>
<td> </td>
<td class="itemTableSpace">{{test}}</td>
<td colspan="2" class="itemTableSpace">{{test}}</td>
</tr>
<tr>
<td class="itemsTableTitle itemTableSpace">7318.16.45</td>
<td> </td>
<td> </td>
<td> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td rowspan="2" class="numericText textCenter alignMiddle">5</td>
<td rowspan="2" class="alignMiddle">
<div class="square" />
</td>
<td class="itemsTableTitle itemTableSpace" colspan="2">test test</td>
<td rowspan="2"> </td>
<td> </td>
<td class="itemTableSpace">{{test}}</td>
<td colspan="2" class="itemTableSpace">{{test}}</td>
</tr>
<tr>
<td class="itemsTableTitle itemTableSpace">7318.16.45</td>
<td> </td>
<td> </td>
<td> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td rowspan="2" class="numericText textCenter alignMiddle">6</td>
<td rowspan="2" class="alignMiddle">
<div class="square" />
</td>
<td class="itemsTableTitle itemTableSpace" colspan="2">test test test test bracket</td>
<td rowspan="2"> </td>
<td> </td>
<td class="itemTableSpace">{{test}}</td>
<td colspan="2" class="itemTableSpace">{{test}}</td>
</tr>
<tr>
<td class="itemsTableTitle itemTableSpace">8302.41.60</td>
<td> </td>
<td> </td>
<td> </td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2" class="numericText textCenter alignMiddle">7</td>
<td rowspan="2" class="alignMiddle">
<div class="square" />
</td>
<td class="itemsTableTitle itemTableSpace" colspan="2">test test test test</td>
<td rowspan="2"> </td>
<td> </td>
<td class="itemTableSpace">{{test}}</td>
<td colspan="2" class="itemTableSpace">{{test}}</td>
</tr>
<tr>
<td class="itemsTableTitle itemTableSpace">3925.90.00</td>
<td> </td>
<td> </td>
<td> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td rowspan="2" class="numericText textCenter alignMiddle">8</td>
<td rowspan="2" class="alignMiddle">
<div class="square" />
</td>
<td class="itemsTableTitle itemTableSpace" colspan="2"> </td>
<td rowspan="2"> </td>
<td> </td>
<td class="itemTableSpace"> </td>
<td colspan="2" class="itemTableSpace"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2" class="numericText textCenter alignMiddle">9</td>
<td rowspan="2" class="alignMiddle">
<div class="square" />
</td>
<td class="itemsTableTitle itemsTableSpace" colspan="2"> </td>
<td rowspan="2"> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="5" class="itemTableSpace">
<span class="tableTitle br">26. test test</span>
<span class="packagingDescriptionText br">test test test(s), test test(es), test test test(s), test test(s)</span>
</td>
<td colspan="2" class="itemTableSpace">
<span class="tableTitle br">24. test test (lb)</span>
{{test}}
</td>
<td class="itemTableSpace">
<span class="tableTitle br">25. test test</span>
{{test}}
</td>
</tr>
<tr>
<td colspan="3" class="itemTableSpace">
<span class="tableTitle br">27. test test (test test)</span>
<div class="textCenter">
<span class="yesNoSquare"></span>
<span class="yesNoSquare-space itemsTableHeader"> YES</span>
<span class="yesNoSquare"></span>
<span class="itemsTableHeader"> NO</span>
</div>
</td>
<td colspan="1" class="itemTableSpace">
<span class="tableTitle br">28. test test (test test)</span>
<div class="textCenter">
<div class="yesNoSquare-cross"></div>
<span class=" yesNoSquare-space itemsTableHeader"> YES</span>
<span class="yesNoSquare"></span>
<span class="itemsTableHeader"> NO</span>
</div>
</td>
<td class="itemTableSpace">
<span class="tableTitle br">29. test test (test)</span>
</td>
<td colspan="2" class="itemTableSpace">
<span class="tableTitle br">30. test</span>
</td>
<td class="itemTableSpace">
<span class="tableTitle br">31. test test test</span>
</td>
</tr>
<tr>
<td colspan="5" class="remove-border itemTableSpace">
</td>
<td colspan="2" class="itemTableSpace">
<span class="tableTitle br">32. test</span>
</td>
<td class="itemTableSpace">
<span class="tableTitle br">33. test test</span>
{{test}}
</td>
</tr>
</tbody>
</table>
<p class="textCenter footerMarkText">test "X" in H.M. test test test test</p>
<p class="footerSignature">34. test test:</p>
<p class="footerSignature">X. test test - test test</p>
</div>
</body>So, I want to remove bottom and left borders (marked in red) on the picture bellow
I tried using a new class on that specific td as:
.removeBorders {
border-bottom: 0px;
border-left: 0px;
}
But it does not work, it just no remove the borders, how can I achieve that?
>Solution :
There are two problems.
Specificity
One aspect is that there is a CSS specificity conflict.
The CSS from this rule:
.commercialTable tr, .commercialTable td {
border: 1px solid #000;
/*vertical-align: top;*/
}
is overriding this rule:
.remove-border {
border: 0px solid #ffffff;
}
because .commercialTable td has specificity of [0, 1, 1] whereas .remove-border has specificity of [0, 1, 0].
We can increase the specificity of the .remove-border a multitude of ways, such as .remove-border[class] which would be [0, 2, 0] and this would then beat .commercialTable td.
<tr> border
Even when removing the border from the <td> element, the <tr> element still has a border, so that needs to be removed too. We can reuse the remove-border class here.
Final code:
#page {
background: #ffffff;
width: 878px;
margin: 0 auto;
margin-top: 10px;
display: block;
border: 1px solid #c4c7c7;
padding: 20px 20px 25px 20px;
position: relative;
z-index: 0;
font-family: Arial;
}
.br {
display: block;
margin-bottom: 0em;
}
.brmedium {
display: block;
margin-bottom: 1em;
}
.brlarge {
display: block;
margin-bottom: 2em;
}
.documentTitle {
text-align: right;
}
.textCenter {
text-align: center;
}
.numericText {
font-size: 26px;
font-family: Arial;
padding: 10px;
}
.square {
width: 30px;
height: 30px;
border: 1px solid;
margin: auto;
}
.yesNoSquare {
width: 10px;
height: 10px;
border: 1px solid;
display: inline-block;
}
.yesNoSquare-space {
padding-right: 20px;
}
.yesNoSquare-cross {
height: 10px;
width: 10px;
position: relative;
border: 1px solid;
display: inline-block;
}
.yesNoSquare-cross:after {
position: absolute;
top: -45px;
bottom: 0;
left: -1.5px;
right: 0;
content: "\2715";
line-height: 100px;
text-align: center;
color: #000000;
}
td {
vertical-align: top;
}
.tableTitle {
font-weight: bold;
font-size: 10px;
}
.tableText {
font-size: 12px;
}
.remove-border[class] {
border: 0px solid #ffffff;
}
.commercialTable {
border-collapse: collapse;
width: 100%;
/*vertical-align: top;*/
}
.commercialTable-space {
padding-left: 15px;
}
.commercialTable tr, .commercialTable td {
border: 1px solid #000;
/*vertical-align: top;*/
}
.itemsTableHeader {
font-size: 10px;
}
.itemsTableTitle {
font-size: 16px;
}
.itemTableSpace {
padding-left: 15px;
}
.packagingDescriptionText {
font-size: 14px;
}
.alignMiddle {
vertical-align: middle;
}
.footerMarkText {
font-size: 12px;
}
.footerSignature {
font-size: 14px;
}<body>
<div id="page">
<h3 class="documentTitle">Test Test</h3>
<table class="commercialTable">
<tbody>
<tr>
<td colspan="9" class="textCenter">
<span class="tableTitle">test test test test</span>
</td>
</tr>
<tr>
<td rowspan="2"></td>
<td rowspan="2" class="textCenter">
<span class="itemsTableHeader br">test. g</span>
<span class="itemsTableHeader br">ttest</span>
</td>
<td colspan="3" class="textCenter">
<span class="itemsTableHeader">17. test, test test test, test, test test test</span>
</td>
<td rowspan="2" class="textCenter">
<span class="itemsTableHeader br">21</span>
<span class="itemsTableHeader">test test</span>
</td>
<td rowspan="2" class="textCenter">
<span class="itemsTableHeader br">22</span>
<span class="itemsTableHeader">test test (lb)</span>
</td>
<td rowspan="2" colspan="2" class="textCenter">
<span class="itemsTableHeader br">23</span>
<span class="itemsTableHeader">test (test test, test test)</span>
</td>
</tr>
<tr>
<td class="textCenter">
<span class="itemsTableHeader br">18. test test</span>
<span class="itemsTableHeader">test test</span>
</td>
<td class="textCenter">
<span class="itemsTableHeader br">19. test</span>
<span class="itemsTableHeader">test test test</span>
</td>
<td class="textCenter">
<span class="itemsTableHeader br">20. test test</span>
<span class="itemsTableHeader">(Kilos)</span>
</td>
</tr>
<tr>
<td rowspan="2" class="numericText textCenter alignMiddle">1</td>
<td class="alignMiddle" rowspan="2">
<div class="square" />
</td>
<td class="itemsTableTitle itemTableSpace" colspan="2">test test test</td>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
<td class="itemTableSpace">{{test}}</td>
<td colspan="2" class="itemTableSpace">{{test}}</td>
</tr>
<tr>
<td class="itemsTableTitle itemTableSpace">7318.15.50</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="2" class="numericText textCenter alignMiddle">2</td>
<td class="alignMiddle" rowspan="2">
<div class="square" />
</td>
<td class="itemsTableTitle itemTableSpace" colspan="2">test test-test test</td>
<td rowspan="2"> </td>
<td> </td>
<td class="itemTableSpace">{{test}}</td>
<td colspan="2" class="itemTableSpace">{{test}}</td>
</tr>
<tr>
<td class="itemsTableTitle itemTableSpace">8302.41.60</td>
<td> </td>
<td> </td>
<td> </td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2" class="numericText textCenter alignMiddle">3</td>
<td class="alignMiddle" rowspan="2">
<div class="square" />
</td>
<td class="itemsTableTitle itemTableSpace" colspan="2">test test test</td>
<td rowspan="2"> </td>
<td> </td>
<td class="itemTableSpace">{{test}}</td>
<td colspan="2" class="itemTableSpace">{{test}}</td>
</tr>
<tr>
<td class="itemsTableTitle itemTableSpace">7318.22.00</td>
<td> </td>
<td> </td>
<td> </td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2" class="numericText textCenter alignMiddle">4</td>
<td rowspan="2" class="alignMiddle">
<div class="square" />
</td>
<td class="itemsTableTitle itemTableSpace" colspan="2">test test</td>
<td rowspan="2"> </td>
<td> </td>
<td class="itemTableSpace">{{test}}</td>
<td colspan="2" class="itemTableSpace">{{test}}</td>
</tr>
<tr>
<td class="itemsTableTitle itemTableSpace">7318.16.45</td>
<td> </td>
<td> </td>
<td> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td rowspan="2" class="numericText textCenter alignMiddle">5</td>
<td rowspan="2" class="alignMiddle">
<div class="square" />
</td>
<td class="itemsTableTitle itemTableSpace" colspan="2">test test</td>
<td rowspan="2"> </td>
<td> </td>
<td class="itemTableSpace">{{test}}</td>
<td colspan="2" class="itemTableSpace">{{test}}</td>
</tr>
<tr>
<td class="itemsTableTitle itemTableSpace">7318.16.45</td>
<td> </td>
<td> </td>
<td> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td rowspan="2" class="numericText textCenter alignMiddle">6</td>
<td rowspan="2" class="alignMiddle">
<div class="square" />
</td>
<td class="itemsTableTitle itemTableSpace" colspan="2">test test test test bracket</td>
<td rowspan="2"> </td>
<td> </td>
<td class="itemTableSpace">{{test}}</td>
<td colspan="2" class="itemTableSpace">{{test}}</td>
</tr>
<tr>
<td class="itemsTableTitle itemTableSpace">8302.41.60</td>
<td> </td>
<td> </td>
<td> </td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2" class="numericText textCenter alignMiddle">7</td>
<td rowspan="2" class="alignMiddle">
<div class="square" />
</td>
<td class="itemsTableTitle itemTableSpace" colspan="2">test test test test</td>
<td rowspan="2"> </td>
<td> </td>
<td class="itemTableSpace">{{test}}</td>
<td colspan="2" class="itemTableSpace">{{test}}</td>
</tr>
<tr>
<td class="itemsTableTitle itemTableSpace">3925.90.00</td>
<td> </td>
<td> </td>
<td> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td rowspan="2" class="numericText textCenter alignMiddle">8</td>
<td rowspan="2" class="alignMiddle">
<div class="square" />
</td>
<td class="itemsTableTitle itemTableSpace" colspan="2"> </td>
<td rowspan="2"> </td>
<td> </td>
<td class="itemTableSpace"> </td>
<td colspan="2" class="itemTableSpace"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2" class="numericText textCenter alignMiddle">9</td>
<td rowspan="2" class="alignMiddle">
<div class="square" />
</td>
<td class="itemsTableTitle itemsTableSpace" colspan="2"> </td>
<td rowspan="2"> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="5" class="itemTableSpace">
<span class="tableTitle br">26. test test</span>
<span class="packagingDescriptionText br">test test test(s), test test(es), test test test(s), test test(s)</span>
</td>
<td colspan="2" class="itemTableSpace">
<span class="tableTitle br">24. test test (lb)</span>
{{test}}
</td>
<td class="itemTableSpace">
<span class="tableTitle br">25. test test</span>
{{test}}
</td>
</tr>
<tr>
<td colspan="3" class="itemTableSpace">
<span class="tableTitle br">27. test test (test test)</span>
<div class="textCenter">
<span class="yesNoSquare"></span>
<span class="yesNoSquare-space itemsTableHeader"> YES</span>
<span class="yesNoSquare"></span>
<span class="itemsTableHeader"> NO</span>
</div>
</td>
<td colspan="1" class="itemTableSpace">
<span class="tableTitle br">28. test test (test test)</span>
<div class="textCenter">
<div class="yesNoSquare-cross"></div>
<span class=" yesNoSquare-space itemsTableHeader"> YES</span>
<span class="yesNoSquare"></span>
<span class="itemsTableHeader"> NO</span>
</div>
</td>
<td class="itemTableSpace">
<span class="tableTitle br">29. test test (test)</span>
</td>
<td colspan="2" class="itemTableSpace">
<span class="tableTitle br">30. test</span>
</td>
<td class="itemTableSpace">
<span class="tableTitle br">31. test test test</span>
</td>
</tr>
<tr class="remove-border">
<td colspan="5" class="remove-border itemTableSpace">
</td>
<td colspan="2" class="itemTableSpace">
<span class="tableTitle br">32. test</span>
</td>
<td class="itemTableSpace">
<span class="tableTitle br">33. test test</span>
{{test}}
</td>
</tr>
</tbody>
</table>
<p class="textCenter footerMarkText">test "X" in H.M. test test test test</p>
<p class="footerSignature">34. test test:</p>
<p class="footerSignature">X. test test - test test</p>
</div>
</body>