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

Try to add border-collapse: collapse to your table:

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

Example

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

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

.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>