HTML table border width to be the same-CodePudding

How can I make the table cell border to be the same width even if I set that border twice? In the examples below you can zoom in and out from the code snippet and see that borders have different width because one was set twice and other just once. Is there a way to make the width to be the same?

table {
  border-collapse: collapse;
}

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

<table>
   <thead>
      <tr>
         <th>
            123
         </th>
         <th>
            123
         </th>
         <th>
            123
         </th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>
            123
         </td>
         <td>
            123
         </td>
         <td>
            123
         </td>
      </tr>
   </tbody>
</table>

CodePudding user response：

just follow this code

<!DOCTYPE html>
<html>
<head>
<style>
 table, th, td {
 border: 2px solid black;
 border-collapse: collapse;
 }
 </style>
 </head>
 <body>
 <table style = "width:50%">
 <tr>
 <td>66,120</td>
 <td>36,600</td>
 </tr>
 <tr>
  <td>26,179</td>
  <td>91,641</td>
 </tr>
 </table>
 </body>
 </html>

CodePudding user response：

Answer

The code you wrote is correct, I'm afraid the problem is the zoom of the web page set differently from 100%. It happened to me couple times and I managed to fix that doing this:

From the browser, try to reset the zoom of the web page to 100%

Let me know how it goes :)