Расположение 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?


Ответы (0 шт):