'Table Border CSS

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

enter image description here

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

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;
}
<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>
htmlcss


Solution 1:[1]

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>

Solution 2:[2]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Dharman

Related Questions