radio button doesn't fit inside a table?

Question

i'm working on this calculator and when the user select one of the type a little table should appear to select a type from tha table but the radio button that should be clicked doesn't fit into table

this is lookup in ccs code of table and the full code in jsfiddle link

    table {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
table-layout: fixed;
}
.rad
{width:1em;
height:1em;}
table thead,
table tbody {
  display: block;
}
table thead th ,table tbody td
{
  font-size : 12px;
}
table tbody {
  max-height: 100px;
  overflow-y: overlay;
  overflow-x: hidden;
}
tr:hover{
background-color:gray;
cursor:pointer;
}
table tbody td, table thead th {
  text-align: center;

}

table tbody td:last-child, table thead th:last-child {
  border-right: none;
}

table tbody td:first-child, table thead th:first-child {
  width: 10px;
}
table tbody td:nth-child(2), table thead th:nth-child(2) {
  width: 100px;
}
table tbody td:nth-child(3), table thead th:nth-child(3) {
  width: 100px;
}
table tbody td:nth-child(4), table thead th:nth-child(4) {
  width: 100px;
}
table tbody td:nth-child(5), table thead th:nth-child(5) {
  width: 100px;
}

the html is too long cuz i implemented the table manually to demonstrate here is https://jsfiddle.net/q58x3s6b/ — Alchemist, May 30 '20 at 21:21

score 3 · Accepted Answer · answered May 30 '20 at 21:22

3

Just remove position: absolute from the css for input[type="radio"]. Working Fiddle.

answered May 30 '20 at 21:22

matthias_h

11,356
9
22
40

ayy thanks i didn't pay attention beacause that is related to another radio button thanks bro – Alchemist May 30 '20 at 22:02

radio button doesn't fit inside a table?

1 Answers1