<table class="stat-res_table">
<colgroup>
<col span = "5" style = "width:20%;">
<col style = "min-width:100px;">
</colgroup>
<thead>
<tr>
<th scope="col"></th>
<th scope="col"></th>
<th scope="col">№ Задания</th>
<th scope="col">Статус</th>
<th scope="col">Кол-во</th>
<!-- <th scope="col">Действия</th> -->
</tr>
</thead>
<tbody>
<tr>
<td><p class="td_border td_border--left">Новых регистраций</p></td>
<td><div div class="td_border" style="width: 230px;">
<div class="elem_input">
<div class="Field Field_stat td_border">
<p>От</p>
<input type="date" name="">
</div>
<div class="Field Field_stat">
<p>До</p>
<input type="date" name="">
</div>
</div>
</div>
</td>
<td><p class="td_border hiddenstat"></p></td>
<td><p class="td_border hiddenstat">
<span class="stat_green"></span>
</p>
</td>
<td data-label="Кол-во"><p class="td_border">1000000</p></td>
</tr>
<tr>
<td><p class="td_border td_border--left">Новых задач</p></td>
<td><div class="td_border">
<div class="elem_input">
<div class="Field Field_stat td_border">
<p>От</p>
<input type="date" name="">
</div>
<div class="Field Field_stat">
<p>До</p>
<input type="date" name="">
</div>
</div>
</div>
</td>
<td data-label="№ Задания"><p class="td_border">112233</p></td>
<td data-label="Статус"><p class="td_border">
<span class="stat_green">Открыто</span></p></td>
<td data-label="Кол-во"><p class="td_border">2222</p></td>
</tr>
<tr>
<td><p class="td_border td_border--left">Активных задач</p></td>
<td><div class="td_border">
<div class="elem_input">
<div class="Field Field_stat td_border">
<p>От</p>
<input type="date" name="">
</div>
<div class="Field Field_stat">
<p>До</p>
<input type="date" name="">
</div>
</div>
</div>
</td>
<td data-label="№ Задания"><p class="td_border">2022</p></td>
<td data-label="Статус"><p class="td_border"><span class="stat_orange">В работе</span></p></td>
<td data-label="Кол-во"><p class="td_border">2222</p></td>
</tr>
<tr class="testTable">
<td><p class="td_border td_border--left">Кол-во откликов</p></td>
<td><div class="td_border">
<div class="elem_input">
<div class="Field Field_stat td_border">
<p>От</p>
<input type="date" name="">
</div>
<div class="Field Field_stat">
<p>До</p>
<input type="date" name="">
</div>
</div>
</div>
</td>
<td>
<div>
<p class="td_border">222</p>
<p class="td_border">333</p>
<p class="td_border">444</p>
</div>
</td>
<td>
<div class="td_border td_border--status">
<span class="stat_green">Открыто</span>
<span class="stat_orange">В работе</span>
<span class="stat_red">Завершено</span>
</div>
</td>
<td>
<div>
<p>5555</p>
<p>666</p>
<p>777</p>
</div>
</td>
<!-- <td class="label_status_wrap" data-label="">
<div style="display: flex;justify-content: space-between;align-content: space-around; width: 100%;">
<p class="label_status">
<span class="" style="width: max-content;">№ Задания</span>
<span>4444</span>
<span>5555</span>
<span>7777</span>
</p>
<p class="label_status">
<span class="">Статус</span>
<span class="stat_green">Открыто</span>
<span class="stat_orange">В работе</span>
<span class="stat_red">Завершено</span>
</p>
<p class="label_status">
<span class="" style="width: max-content;">Кол-во</span>
<span>222</span>
<span>333</span>
<span>444</span>
</p>
<</div>
</td> -->
</tr>
<tr>
<td><p class="td_border td_border--left">Завершенных задач</p></td>
<td><div class="td_border">
<div class="elem_input">
<div class="Field Field_stat td_border">
<p>От</p>
<input type="date" name="">
</div>
<div class="Field Field_stat">
<p>До</p>
<input type="date" name="">
</div>
</div>
</div>
</td>
<td data-label="№ Задания"><p class="td_border">2022</p></td>
<td data-label="Статус"><p class="td_border"><span class="stat_red">Завершено</span></p></td>
<td data-label="Кол-во"><p class="td_border">2222</p></td>
</tr>
<tr>
<td>
<p class="td_border td_border--left">Всего пользователей</p></td>
<td><div class="td_border">
<div class="elem_input">
<!-- <div class="Field Field_stat td_border">
<p>От</p>
<input type="date" name="">
</div>
<div class="Field Field_stat">
<p>До</p>
<input type="date" name="">
</div> -->
</div>
</div>
</td>
<td><p class="td_border hiddenstat"></p></td>
<td><p class="td_border hiddenstat"></p></td>
<td data-label="Кол-во"><p class="td_border">2222</p></td>
</tr>
</tbody>
</table>.newsletter-data {
max-width: 866px;
width: 100%;
}
.stat-res_table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
tr th {
padding-bottom: 7px;
}
td {
border: 1px solid #ECECEC;
border-style: none solid solid none;
padding: 10px;
}
tr:first-child td:first-child { border-top-left-radius: 10px; }
tr:first-child td:last-child { border-top-right-radius: 10px; }
tr:last-child td:first-child { border-bottom-left-radius: 10px; }
tr:last-child td:last-child { border-bottom-right-radius: 10px; }
tr:first-child td { border-top-style: solid; }
tr td:first-child { border-left-style: solid; }
/* .stat-res_table th {
padding: 1%;
border-right: 1px solid #CCCCCC;
}
.stat-res_table td:last-child, .stat-res_table th:last-child {
border-right: none;
} */
.stat-res_table td {
align-items: center;
font-weight: 500;
font-size: 15px;
line-height: 14px;
padding: 1% 2px;
text-align: center;
}
/* .newsletter-res_table td p {
word-break: break-all;
} */
.stat-res_table thead {
width: 100%;
padding: 5px 15px;
border-bottom: 1px solid #CCCCCC;
}
.stat-res_table tr:last-child {
border-bottom: none;
}
.stat-res_table .td-btn button {
margin-bottom: 10px;
font-weight: 500;
font-size: 15px;
line-height: 14px;
border-radius: 5px;
height: 35px;
cursor: pointer;
max-width: 175px;
width: 100%;
}
/*stat_container*/
/* .stat_container {
background-color: #e5e8e3;
height: 100%;
width: 100%;
}
.stat_container_data {
height: 409px;
/*max-width: 760px;
width: 100%;
}
.elem_line1 {
padding-left: 10px;
width: 425px;
display: flex;
justify-content: space-between;
align-items: center;
}
.elem_line2{
width: 50%;
display: flex;
justify-content: flex-end;
}
.elem_input {
display: flex;
width: 200px;
justify-content: space-between;
}
.elem_input input {
width: 80px;
height: 30px;
padding-left: 1px;
margin-left: 8px;
}
.Field_stat{
display: flex;
align-items: center;
}
.elem {
border-bottom: 2px solid black;
border-top: 2px solid black;
display: flex;
width: 100%;
}
.elem_info{
border-right: 2px solid black;
display: flex;
width: 25%;
background-color: #5ABC01;
} */
.Field_stat{
display: flex;
align-items: center;
}
.Field_stat:nth-child(2) {
margin-left: 10px;
}
.td_border--left {
text-align: left;
}
.elem_input {
display: flex;
width: 200px;
justify-content: space-between;
}
.elem_input input {
width: 80px;
height: 30px;
padding-left: 1px;
margin-left: 8px;
}
.stat_green{
font-weight: 500;
font-size: 14px;
line-height: 17px;
color: #8AC44B;
}
.stat_orange{
font-weight: 500;
font-size: 14px;
line-height: 17px;
color: #F8981D;
width: max-content;
}
.stat_red{
font-weight: 500;
font-size: 14px;
line-height: 17px;
color: red;
}
.HDmain_stat {
font-size: 36px;
font-weight: 600;
line-height: 14px;
letter-spacing: 0em;
text-align: center;
margin-bottom: 45px;
}
.stat_button {
display: flex;
justify-content: space-between;
width: 300px;
float: right;
margin-top: 25px;
margin-right: 4%;
}
.stat_button button{
height: 40px;
width: 132px;
border-radius: 8px;
padding: 13px 30px 13px 30px;
border: none;
color: white;
}
.stat_button .stat_button--sbros {
background: #F4BC3C;
}
.stat_button .stat_button--show {
background: #23B4BC;
}
.td_border--status{
display: flex;
flex-direction: column;
justify-content: space-between;
height: 60px;
align-items: center;
}
@media screen and (max-width: 500px) {
.stat_button {
display: flex;
justify-content: space-between;
width: 100%;
margin-top: 25px;
margin-right: 0;
}
}
@media screen and (max-width: 700px) {
.HDmain_stat {
font-size: 24px;
margin-bottom: 20px;
margin-top: 10px;
}
td {
border: solid 12px #CCCCCC;
border-style: none;
padding: 0px;
}
tr:first-child td:first-child { border-top-left-radius: 0px; }
tr:first-child td:last-child { border-top-right-radius: 0px; }
tr:last-child td:first-child { border-bottom-left-radius: 0px; }
tr:last-child td:last-child { border-bottom-right-radius: 0px; }
tr:first-child td { border-top-style: none; }
tr td:first-child { border-left-style: none; }
.stat-res_table {
max-width: 700px;
width: 100%;
}
.stat-res_table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.stat-res_table tr {
border-bottom: 20px;
border-right: 1px solid #ECECEC;
border-left: 1px solid #ECECEC;
border-radius: 20px 20px 20px 20px;
}
.stat-res_table tr:nth-child(even) {
background-color: rgba(103, 100, 113, 0.0784313725);
}
.stat-res_table td {
font-weight: 500;
font-size: 12px;
line-height: 14px;
display: flex;
justify-content: space-between;
border-right: 0;
padding: 0;
}
.stat-res_table td:nth-child(1),
.stat-res_table td:nth-child(2) {
justify-content: flex-start;
}
.stat-res_table td:nth-child(1) {
border-top: 1px solid #ECECEC;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
.stat-res_table td:nth-child(2) {
border-bottom: 1px solid #ECECEC;
}
.stat-res_table td .td_border {
font-size: 12px;
font-weight: 600;
text-align: right;
padding: 2% 1% 1% 1%;
}
.stat-res_table td:last-child {
border-bottom: none;
}
.stat-res_table td:before {
content: attr(data-label);
font-weight: 600;
font-size: 12px;
line-height: 14px;
text-align: left;
}
.stat-res_table colgroup {
display: none;
}
/* .td_border.hiddenstat {
display: none;
}
.label_status{
height: 90px;
display: flex;
flex-direction: column;
align-items: center;
}
.label_status span {
height: 22px;
}
td.label_status_wrap{
justify-content: flex-start;
} */
.testTable{
display: grid;
grid-template-columns: repeat(3,150px);
grid-template-rows: repeat(2,150px);
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.