How to create border for table column-CodePudding

Below are my codes

table {
            border: 1px solid;
            width: 20.5%;
            
        }

     <table >
        <tr>
            <th align = "left">Ann-Maree Smith </th>
            <th align = "left">Mitz Perez</th>
        </tr>
        <tr>
            <td>Bld 40:133, Wollongong</br>Campus </td>
            <td>Bld 4:105, Wollongong</br>Campus</td>
        </tr>
        <tr>
            <td>(02) 4221 4714 </td>
            <td>(02) 4221 3833 </td>
        </tr>
        <tr>
            <td>Mon-Fri</td>
            <td>Mon-Fri</td>
        </tr>
        <tr>
            <td>[email protected]</td>
            <td>[email protected]</td>
        </tr>
    </table>

I'm trying to achieve this [1]: https://i.stack.imgur.com/qnBdQ.png however, my table only has 1 border, lacking the "column border" instead of the double border seen in the picture. I was wondering what is the best way to achieve what I want.

CodePudding user response：

you would have to change your table structure since you basically want a solid border around the table cell then a solid border around the entire table otherwise you will get boxes at the corners

<head>
<style>
table {
    border: 1px solid;
    width: 20.5%
  }

tr > td {
    border: 1px solid;
}

tr > td > span.name {
    font-weight: bold;
}

tr > td > span {
    display: block;
}
</style>
</head>
<body>
     <table >
        <tr>
        <td>
            <span >Ann-Maree Smith</span>
            <span>Bld 40:133, Wollongong</br>Campus</span>
            <span>(02) 4221 4714 </span>
            <span>Mon-Fri</span>
            <span>[email protected]</span>
        </td>
        <td>
            <span >Mitz Perez</span>
            <span>Bld 4:105, Wollongong</br>Campus</span>
            <span>(02) 4221 3833 </span>
            <span>Mon-Fri</span>
            <span>[email protected]</span>
        </td>
        </tr>
    </table>
</body>