dwiyanto dwiyanto - 2 months ago 11
HTML Question

Making border on html in a particular column

how to add a border only on the fields I expected as the example below,



<table width="500" border="1">
<tr>
<td>no border</td>
<td>no border</td>
<td>Just</td>
</tr>
<tr>
<td>no border</td>
<td>no border</td>
<td>Border</td>
</tr>
<tr>
<td>no border</td>
<td>no border</td>
<td>here 1 box</td>
</tr>
</table>




Answer

You can try adding a class to those specific td that you want. I also removed the border=1 from <table border="1">

HTML:

<table width="200">
<tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td class="modified-td-top">Just</td>
</tr>
<tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td class="modified-td-middle">Border</td>
</tr>
<tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td class="modified-td-bottom">here</td>
</tr>
</table>

CSS:

table {border:0px;border-collapse: collapse;}

.modified-td-middle {
border-left:1px solid black;
border-right:1px solid black;
}

.modified-td-top {
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
}

.modified-td-bottom {
border-bottom: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid black;
}