I am trying to create a table in HTML and expecting that all the border in the table is in same weight, but I get this result where there is some rows that have different border weight

Table

The HTML code is in this structure (full HTML can't be posted as it is considered too much code by StackOverflow)

<table>
    <thead>
        <tr>
            <td>Vehicle Name</td>
            <td>Tour</td>
            <td>Total Distance</td>
            <td>Total Charge</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Vehicle 1</td>
            <td>1 2 3</td>
            <td>101.2</td>
            <td>1012</td>
        </tr>
        ....
    </thead>
</table>

And here is my css for table element:

table {
  width: 100%;
  margin-bottom: 1rem;
  border: 1px solid black;
  border-collapse: collapse;
  color: rgb(20, 35, 58);
  word-spacing: 3px;
  padding: 5px;
}

td {
  border: 1px solid black;
  padding: 5px;
  margin: 10px;
}

tr {
  height: 20px;
}

thead{
  font-weight: bold;
}

CodePudding user response：

If you have 4 columns then you can add width: 25% to the td style.

table {
  width: 100%;
  margin-bottom: 1rem;
  border: 1px solid black;
  border-collapse: collapse;
  color: rgb(20, 35, 58);
  word-spacing: 3px;
  padding: 5px;
}

td {
  border: 1px solid black;
  padding: 5px;
  margin: 10px;
  width: 25%;
}

tr {
  height: 20px;
}

thead{
  font-weight: bold;
}

 <table>
<thead>
    <tr>
        <td>Vehicle Name</td>
        <td>Tour</td>
        <td>Total Distance</td>
        <td>Total Charge</td>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Vehicle 1</td>
        <td>1 2 3</td>
        <td>101.2</td>
        <td>1012</td>
    </tr>
    ....
</thead>
</table>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

I was not able to recreate the issue under normal condition, but when I changed the dimension of my web browser, the browsers attempt to rescale the table created the OP's described issue. I solved this issue by changing border: 1px to border: 0.01vw. This tells the browser explicitly how to scale the table and therefore avoids the problem.

---

table {
    width: 100%;
    margin-bottom: 1rem;
    border: 0.01vw solid black;
    border-collapse: collapse;
    color: rgb(20, 35, 58);
    word-spacing: 3px;
    padding: 5px;
  }
  
  td {
    border: 0.01vw solid black;
    padding: 5px;
    margin: 10px;
  }
  
  tr {
    height: 20px;
  }
  
  thead{
    font-weight: bold;
  }

   <table>
        <thead>
            <tr>
                <td>Vehicle Name</td>
                <td>Tour</td>
                <td>Total Distance</td>
                <td>Total Charge</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Vehicle 1</td>
                <td>1 2 3</td>
                <td>101.2</td>
                <td>1012</td>
            </tr>
            <tr>
                <td>Vehicle 2</td>
                <td>1 2 3</td>
                <td>101.2</td>
                <td>1012</td>
            </tr>
            <tr>
                <td>Vehicle 3</td>
                <td>1 2 3</td>
                <td>101.2</td>
                <td>1012</td>
            </tr>
            <tr>
                <td>Vehicle 4</td>
                <td>1 2 3</td>
                <td>101.2</td>
                <td>1012</td>
            </tr>
            <tr>
                <td>Vehicle 5</td>
                <td>1 2 3</td>
                <td>101.2</td>
                <td>1012</td>
            </tr>
            <tr>
                <td>Vehicle 6</td>
                <td>1 2 3</td>
                <td>101.2</td>
                <td>1012</td>
            </tr>
            <tr>
                <td>Vehicle 7</td>
                <td>1 2 3</td>
                <td>101.2</td>
                <td>1012</td>
            </tr>
        </tbody>
    </table>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Try move the border line in the table to the tr