0

I am having trouble with this simple table surrounded by a green box which is the div.

The right side of the green box is stretching all the way to the right side. I want it to be snug around the table. How do I fix this? Thanks!

Here is my HTML and CSS code.

.tblEdu{
  position: relative;
  left: 100px;
  right: 100px;
  background-color: #e8efeb;
}

table{

  text-align: left;
  position: relative;
  left: 10px;
  color: #214252
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">
    <title></title>
  </head>
  <body>
    <h3>Education</h3>
  <div class="tblEdu">

  <table cellspacing="20px">
    <tr>
      <th>School</th>
      <th>Years</th>
      <th>Diploma</th>
    </tr>
    <tr>
      <td>The Lorem State University</td>
      <td>2012-2016</td>
      <td>Bachelor of Science Degree in Information Technology</td>
    </tr>
    <tr>
      <td>Ipsum High School</td>
      <td>2008-2012</td>
      <td>High School Diploma</td>
    </tr>

  </table>
</div>


  </body>
</html>
sysaleem
  • 1
  • 1

0 Answers0