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>
Try to add border-collapse: collapse
to your table:
.table {
position: absolute;
width: 100%;
border-collapse: collapse;
}
.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>