Issue
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:
/* Styles go here */
.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;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="container">
<table class="table">
<tr>
<td>First</td>
</tr>
<tr>
<td>Second</td>
</tr>
<tr>
<td>Third</td>
</tr>
</table>
</div>
</body>
</html>Solution
Try to add border-collapse:collapse to your table:
like this :
.table{
position: absolute;
width: 100%;
border-collapse: collapse;
}
Here is a demo.
Here is the full code :
/* Styles go here */
.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;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="container">
<table class="table">
<tr>
<td>First</td>
</tr>
<tr>
<td>Second</td>
</tr>
<tr>
<td>Third</td>
</tr>
</table>
</div>
</body>
</html>Answered By - Amine KOUIS
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.