CSS Vertical Dividers

Please Share On:

Definition:

You need to add border-right property to table header <th> and table datas <td> to create vertical dividers. You can style your vertical dividers with your table requirement. To learn about different styles of border-right values, read border-style first.

Syntax:

 border-right: 5px dashed Magenta;

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

table, th, td {
  text-align: left;
  border-right: 5px dashed Magenta;
  }

th, td {
  padding: 8px;
}
</style>
</head>
<body>

<h3>Example of CSS Horizontal Dividers</h3>

<table>
  <tr>
    <th>Roll No.</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Hobby</th>
  </tr>
  <tr>
    <td>1.</td>
    <td>Harry</td>
    <td>Potter</td>
    <td>Acting</td>
  </tr>
  <tr>
    <td>2.</td>
    <td>Brad</td>
    <td>Pitt</td>
    <td>Acting</td>
  </tr>
  <tr>
    <td>3.</td>
    <td>David</td>
    <td>Warner</td>
    <td>Sports</td>
  </tr>
</table>

</body>
</html>

Output:

Change the above code

 border-right: 5px dashed Magenta;

into

 border-right: 5px solid Red;

and see the output,

You may be interested in the following topics:

Post Views: 3,813

CSS Vertical Dividers

Definition:

Syntax:

Source Code:

Output:

Leave a Reply Cancel reply

Copyright @2023. All Right Reserved.