You can give both cells a border, then remove the border on one side with the border-right and border-left properties:

table {
  border-collapse: collapse;
}

#filename3 {
  border: 10px solid;
  border-right: 0px;
}

#filename4 {
  border: 10px solid;
  border-left: 0px;
}

<table>
  <td id="filename1">1</td>
  <td id="filename2">2</td>
  <td id="filename3">3</td>
  <td id="filename4">4</td>
</table>

css:

<style>
    table,
    th,
    td {
        border: 1px solid black;
        border-collapse: collapse;
    }
</style>

Html:

<table>
    <tr>
        <th>Month</th>
        <th>Savings</th>
    </tr>
    <tr>
        <td>January</td>
        <td>$100</td>
    </tr>
    <tr>
        <td>February</td>
        <td>$80</td>
    </tr>
    <tr>
        <td colspan="2">sum: 180</td>
    </tr>
</table>

Have you tried this colspan attribute? If this is what you asked.

I assume you are trying to select both of the ID’s at the same time? You can select both of the IDs by

#filename3, #filename4 {/*enter css styles here*/}

If you are trying to select both by a single class, simply add a parent div around the 2 elements you are trying to group.

<tbody><td id="filename1"> </td><td id="filename2"> </td><div class='parent'><td id="filename3"> </td><td id="filename4"> </td></div></tbody>

Hope this helped :)!

how to add border for filename3 and filename4 column as a whole using html and css.

table with borders

   
   <table>
   <tbody>
    <td id="filename1"> 1</td>
    <td id="filename2">1 </td>
    <td id="filename3"> 1</td>
    <td id="filename4"> 1</td> 
    </tbody>    
    </table>