Расположение textarea в том же месте, что и td
Есть таблица в phpmyadmin
При двойном щелчке на ячейку таблица принимает следующий вид
Хочу сделать также со своей таблицей (чтобы при двойном щелчке на ячейке раскрывалось поле для редактирования)
* {
margin: 0;
padding: 0;
}
.hstyle {
text-align: center;
margin-top: 30px;
}
.secondandmore {
margin-top: 30px;
}
#second {
margin-top: 30px;
}
.calltable tr td {
/*border-spacing: 10px;*/
padding-left: 25px;
padding-right: 25px;
font-weight: bold;
border: 2px solid royalblue;
background-color: rgb(202, 203, 209);
}
.calltable {
margin-top: 30px;
/*border-spacing: 40px;*/
/*border: 2px solid royalblue;*/
border-collapse: collapse;
margin-bottom: 30px;
}
#btns {
background-color: white;
padding-left: 15px;
margin-top: 30px;
}
#addoperator {
border: 1px solid rgb(0, 205, 26);
font-size: 14px;
background-color: rgb(0, 205, 26);
border-radius: 5px;
color: white;
width: 150px;
height: 35px;
margin-top: 25px;
}
#addnewuser {
border: 1px solid rgb(0, 205, 26);
font-size: 14px;
background-color: rgb(0, 205, 26);
border-radius: 5px;
color: white;
width: 150px;
height: 35px;
margin-top: 25px;
}
#addnewcall {
border: 1px solid rgb(0, 205, 26);
font-size: 14px;
background-color: rgb(0, 205, 26);
border-radius: 5px;
color: white;
width: 150px;
height: 35px;
margin-top: 25px;
}
.addcall {
border: 1px solid rgb(0, 205, 26);
font-size: 14px;
background-color: rgb(0, 205, 26);
border-radius: 5px;
color: white;
width: 150px;
height: 35px;
margin-top: 25px;
}
#deleteoperator {
border: 1px solid rgb(254, 0, 0);
font-size: 14px;
background-color: rgb(254, 0, 0);
border-radius: 5px;
color: white;
width: 150px;
height: 35px;
}
.checkboxitemuserlist, .checkboxitemuserlisttotalcost {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
.wrapper {
display: flex;
justify-content: space-between;
width: 100%;
}
.leftmenu {
flex: 1;
}
.tableblock {
flex: 2;
}
.wrapperusers {
display: flex;
justify-content: space-between;
width: 100%;
}
.leftmenuusers {
flex: 1;
}
.tableblockusers {
flex: 2;
}
#alllistoperators, #alllistusers {
width: 100%;
border-collapse: collapse;
}
#alllistoperators tr td{
width: 50%;
text-align: center;
/*
padding-left: 25px;
padding-right: 25px;
*/
font-weight: bold;
/*
border: 2px solid royalblue;
background-color: rgb(202, 203, 209);
*/
border: 2px solid rgb(207, 207, 207);
background-color: white;
}
#alllistoperators thead tr th {
width: 50%;
text-align: center;
border: 2px solid rgb(207, 207, 207);
background-color: rgb(99, 106, 116);
color: white;
}
#alllistusers tr td {
width: 33%;
text-align: center;
/*
padding-left: 25px;
padding-right: 25px;
*/
font-weight: bold;
border: 2px solid royalblue;
background-color: rgb(202, 203, 209);
}
#userdurationcalltable {
width: 100%;
border-collapse: collapse;
}
#userdurationcalltable tr td {
width: 50%;
text-align: center;
/*
padding-left: 25px;
padding-right: 25px;
*/
font-weight: bold;
border: 2px solid royalblue;
background-color: rgb(202, 203, 209);
}
.leftmenuoperators {
flex: 1;
}
#operatorsdurationcalltable{
width: 100%;
border-collapse: collapse;
}
#operatorsdurationcalltable tr td {
width: 50%;
text-align: center;
/*
padding-left: 25px;
padding-right: 25px;
*/
font-weight: bold;
border: 2px solid royalblue;
background-color: rgb(202, 203, 209);
}
#stattable {
width: 100%;
border-collapse: collapse;
}
#stattable tr td {
width: 50%;
text-align: center;
/*
padding-left: 25px;
padding-right: 25px;
*/
font-weight: bold;
border: 2px solid royalblue;
background-color: rgb(202, 203, 209);
}
#calculation {
text-align: right;
}
.elemcheckbox {
display: flex;
padding-left: 15px;
}
.elemuserlist, .elemoperatorlist {
padding-left: 15px;
}
.centeredblock {
text-align: center;
font-weight: bold;
margin-top: 30px;
margin-bottom: 30px;
}
.chooseperiod {
display: flex;
justify-content: space-between;
margin-bottom: 30px;
}
.chooseperiodbegin {
display: flex;
align-items: center;
}
.chooseperiodend {
display: flex;
align-items: center;
}
#beginlocaldate, #endlocaldate {
margin-left: 5px;
}
/*
#choosedatetimebegin {
display: flex;
align-items: center;
}
#chooseduration {
display: flex;
align-items: center;
}
*/
#choosedatetimebegin {
display: flex;
align-items: center;
}
.labeldatetimebegin {
width: 305px;
}
.datetimeinput {
width: 100%-305px;
}
#chooseduration {
display: flex;
align-items: center;
margin-top: 10px;
}
.duration {
width: 424px;
}
.durationinput {
width: 100%-424px;
}
#inuser {
display: flex;
align-items: center;
margin-top: 10px;
}
#labelinuser {
width: 310px;
}
#selectinuser {
width: 100%-310px;
}
#outuser {
display: flex;
align-items: center;
margin-top: 10px;
}
#labeloutuser {
width: 310px;
}
#selectoutuser {
width: 100%-310px;
}
.checkboxitemusertotalcost{
display: flex;
padding-left: 15px;
}
.checkboxitemusernametotalcost {
padding-left: 15px;
}
<div class="tableblock">
<table id="alllistoperators">
<thead>
<tr>
<th>
Оператор
</th>
<th>
Тариф
</th>
</tr>
</thead>
</table>
</div>
Как сделать так, чтобы скрытое textarea имело те же координаты, что и td?

