Table With Invisible Borders in Punjabi | Table CSS Border | HTML Tutorials

<!DOCTYPE html>
<html>
<head>
<title>Table With Invisible Borders</title>
</head>
<body>
<b>Table With Invisible Borders using CSS</b>
<p>Style the table with white borders and a background color of the cells to make the impression of invisible borders.</p>
<table style="width:100%">
  <tr>
    <th>#</th>
    <th>Name of Student</th>
    <th>Class</th>
  </tr>
  <tr>
    <td>1.</td>
    <td>Taranpreet Singh</td>
    <td>6th</td>
  </tr>
  <tr>
    <td>2.</td>
    <td>Mehakpreet Kaur</td>
    <td>7th</td>
  </tr>
  <tr>
    <td>3.</td>
    <td>Veerpal Kaur</td>
    <td>8th</td>
  </tr>
  <tr>
    <td>4.</td>
    <td>Jasmeen</td>
    <td>9th</td>
  </tr>
  <tr>
    <td>5.</td>
    <td>Sonia</td>
    <td>10th</td>
  </tr>
  <tr>
    <td>6.</td>
    <td>Jaskaran Singh</td>
    <td>11th</td>
  </tr>
  <tr>
    <td>7.</td>
    <td>Arshdeep Kaur</td>
    <td>12th</td>
  </tr>
  
</table>

</body>
</html>

table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}

Live Demo & Try it yourself!

HTML Programming

Search This Blog

Table With Invisible Borders in Punjabi | Table CSS Border | HTML Tutorials | Online HTML Editor

Comments

Post a Comment