Table inside a div with border does not occupy full space

Question

I am trying to place a table inside a div. Div has its own border, but I also want border of the table. So I have set the border of td but i found the my table is not occupying full available space. Is there something that I am missing over here?

Here is the sample implementation:

I am trying below mention code:

.container {
  width: 250px;
  height: 250px;
  position: relative;
  border: 1px solid black;
}

.table {
  position: absolute;
  width: 100%;
}

.table td {
  border-bottom: 1px solid;
  padding: 0px;
  margin: 0px;
  width: 100%;
}

* {
  margin: 0px;
  padding: 0px;
}

<div class="container">
  <table class="table">
    <tr>
      <td>First</td>
    </tr>
    <tr>
      <td>Second</td>
    </tr>
    <tr>
      <td>Third</td>
    </tr>
  </table>
</div>

Answer 1

Pre HTML 5, add the following to your table as attributes:

<table cellpadding="0" cellspacing="0">...</table>

For reference:

• Table cellpadding - MDN Docs
• Table cellspacing - MDN Docs

HTML5 requires CSS.

table {
  border-collapse: collapse;
  border-spacing: 0;
}
th, td {
  padding: 0px;
}

So for your case:

.table {
  position: absolute;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

.table td {
  border-bottom: 1px solid;
  padding: 0px;
  margin: 0px;
  width: 100%;
  padding: 0px;
}

Answer 2

You can remove the extra space around the table cells by setting:

table {
  border-collapse: collapse;
}

It's set to border-collapse: separate; by default, read more on MDN.

.container {
  width: 250px;
  height: 250px;
  position: relative;
  border: 1px solid black;
}

.table {
  position: absolute;
  width: 100%;
  border-collapse: collapse; /* NEW */
}

.table td {
  border-bottom: 1px solid;
  padding: 0px;
  margin: 0px;
  width: 100%;
}

* {
  margin: 0px;
  padding: 0px;
}

<div class="container">
  <table class="table">
    <tr>
      <td>First</td>
    </tr>
    <tr>
      <td>Second</td>
    </tr>
    <tr>
      <td>Third</td>
    </tr>
  </table>
</div>