Подсветка строки, а не ячейки
Есть таблица
* {
margin: 0;
padding: 0;
background-color: rgb(225, 226, 231);
font-family: futura;
}
.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;
/*text-align: left;*/
/*background-color: rgb(235, 236, 239);*/
}
.tableblock {
flex: 2;
padding-left: 30px;
}
.wrapperusers {
display: flex;
justify-content: space-between;
width: 100%;
}
.leftmenuusers {
flex: 1;
}
.tableblockusers {
flex: 2;
}
#alllistusers {
width: 100%;
border-collapse: collapse;
}
#alllistoperators {
/*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);*/
/*background-color: rgb(150, 154, 163); */
/*background-color: rgb(216, 211, 208);*/
/*background-color: rgb(229, 164, 132);*/
/*background-color: rgb(165, 198, 177);*/ /*подходит*/
/*background-color: #D3DCE3;*/
background-color: rgb(211, 220, 227);
/*background-color: rgb(202, 222, 246);*/
/*background-color: rgb(225, 206, 230);*/
/*background-color: rgb(239, 243, 247);*/
/*color: white;*/
}
#labeloperatorname, #labelratevalue {
font-weight: bold;
}
#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;
}
#operatornameblock {
display: grid;
grid-template-columns: auto 30%;
padding-left: 45px;
padding-right: 45px;
}
#ratevalueblock {
display: grid;
grid-template-columns: auto 30%;
margin-top: 20px;
padding-left: 45px;
padding-right: 45px;
}
#operatorname, #ratevalue {
width: 100%;
}
#alllistoperators tbody tr:nth-child(2n+1) td {
background-color: #E5E5E5;
}
#alllistoperators tbody tr:nth-child(2n) td {
background-color: #D5D5D5;
}
#alllistoperators tbody tr td:hover {
background: rgb(204, 255, 204);
}
<div class="tableblock">
<table id="alllistoperators">
<!--
<tr>
<td>
Оператор
</td>
<td>
Тариф
</td>
</tr>
-->
<thead>
<tr>
<th>
Оператор
</th>
<th>
Тариф
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
При
#alllistoperators tbody tr td:hover {
background: rgb(204, 255, 204);
}
подсвечивается ячейка, а не строка. При этом
#alllistoperators tbody tr:hover {
background: rgb(204, 255, 204);
}
не работает. Подскажите как подсветить строку, а не ячейку.
Ответы (1 шт):
Автор решения: teran
→ Ссылка
надо подсветить все ячейки в строке
#alllistoperators tbody tr:hover td {
background: rgb(204, 255, 204);
}