Menu
i have big challenge in html css in create custom table
I have no idea in this case for create I want create circular on vertical line of border I create this table . but these to are very Different :-D
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
.container {
width: 100px;
height: 1px;
background-color: black;
position: relative;
}
.circle {
display: inline-block;
vertical-align: middle;
width: 40px;
height: 40px;
background-color: white;
border: solid 1px black;
border-radius: 50%;
position: absolute;
top: -6px;
left: calc(50% - 5px);
}<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Eve</td>
<td>
<div class="container">
<div class="circle">test</div>
</div>
</td>
<td>94</td>
</tr>
</table>
215
You can add borders to a Table by using its border property, like this: border: TableBorder. all(width: 1, color: Colors.
To create table border in HTML, the border attribute was used. But the introduction of HTML5, deprecated the border tag. Create table border using the CSS property border. Set table border as well as border for <th> and <td>.
You are on right track just a little bit of changes in left and some padding on td
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 16px;
}
td{
padding-right: 22px;
}
.container {
position: relative;
}
.circle {
display: inline-block;
vertical-align: middle;
width: 40px;
height: 40px;
background-color: white;
border: solid 1px black;
border-radius: 50%;
position: absolute;
left: -38px;
top: 50%;
text-align: center;
line-height: 37px;
transform: translate(0%, -50%);
}<html>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Eve</td>
<td><div class="container">
<div class="circle">
test
</div>
</div></td>
<td>94</td>
</tr>
<tr>
<td>Eve</td>
<td><div class="container">
<div class="circle">
test
</div>
</div></td>
<td>94</td>
</tr>
<tr>
<td>Eve</td>
<td><div class="container">
<div class="circle">
test
</div>
</div></td>
<td>94</td>
</tr>
</table>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
