0

Есть таблица из блоков . Строки добавляются как надо, но при попытке добавить ещё один блок, нижняя строка не смещается, а находит на блок.

$(document).ready(function () {
    $('div.table_row.workplace_row').hover(
        function () {
            $(this).find('div.workplace_td.pointer').fadeIn(200)
        },
        function () {
            $(this).find('div.workplace_td.pointer').fadeOut(200)
        }).click(
        function () {
            $(this).find('div.item_body').fadeToggle(200);
			$(this).css({'border-radius' : '5px 5px 0 0'});
        }
    )
});
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');

body, html { 
    width: 100%;
    height: 100%;
}

body {
	margin: 0;
	background: #000;
}

h1, h2, h3, h4, label, input {
	font-family:  Roboto, sans-serif;
}

h2 {
	color: #435063;
	font-size: 22px;
	margin: 20px 0 0 30px;
}

h3 {
	color: #b5babc;
	font-size: 12px;
	font-weight: normal;
	margin: 5px 0 0 30px;
}

p {
	font-family:  Roboto, sans-serif;
}

a {
	font-family: Roboto, sans-serif;
	text-decoration: none;
}

.site_header {
	position: absolute;
	width:100% - 300px; 
    background: #29313C;
	height: 66px;
	z-index: 2;
	left: 150px;
	right: 150px;
	top: 0%;
	bottom: 0%;
	box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
}

.site_logo_icon{
	position: absolute;
	margin: 15px 0 0 27px;
}

.site_logo_name{
	position: absolute;
	margin: 17px 0 0 63px;
}

.site_logo_name p{
	color: #f2f2f2;
	font-size: 30px;
	font-weight: bold;
	margin: 0 0 0 0;
}

.side_menu {
	position: absolute;
	height: 100% - 66px;
    background: #323A45;
	width: 80px;
	z-index: 1;
	top: 66px;
	left: 150px;
	right: 0%;
	bottom: 0%;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

.side_button{
	float: left;
	width: 50px;
	height: 40px;
	background: #282E37;
	border-radius: 4px;
}

.side_button.first {
	margin: 30px 0 0 13px;
}

.side_button.second{
	margin: 5px 0 0 13px; 
}
 
.side_button a{
	display: block;
	height: 40px;
	width: 50px;
}

.side_button img{
	margin: -18px 0 0 -29px;
	
}
 
.side_button_image {
	position: absolute;
	margin: 13px 0 0 16px;
}

.svg_ {
	margin: 6px 0 0 6px;
}

.svg_client {
	margin: 6px 0 0 8px;
}

.svg_error {
	margin: 13px 0 0 12px;
}

.svg_side_button {
	margin: 13px 0 0 16px;
}

.svg_side_find {
	margin: 8px 0 0 12px;
}

.svg_side_money {
	margin: 7.5px 0 0 12.5px;
}

.svg_side_report {
	margin: 7px 0 0 12.5px;
}

.main_workplace {
	position: absolute;
	background: #f2f2f2;
	height: 100% - 66px;
	width: 100% - 230px;
	top: 66px;
	left: 230px;
	right: 150px;
	bottom: 0%;
	overflow: auto;
}

.workplace_title{
	width: 400px;
	height: 42px;
	margin: 25px 0 0 10px;

}

.table_row {
	width: 1400px;
	background: #ffffff;
	border-radius: 5px;
	margin: 2px 30px 0;
	box-shadow: 0 0 9px -4px rgba(0, 0, 0, .5);
}

.table_row.workplace_row {
	margin: 5px 40px 0 40px;
	height: 50px;
}

.table_row.title_table {
	margin: 20px 40px 0 40px;
	height: 40px;
}

.title_td {
	height: 100%;
}

.title_td.td_1 {
	float: left;
	width: 250px;
}

.title_table.p{
	color: #435063;
	font-size: 13px;
	font-weight: bold;
	margin: 13px 20px 0;
}

.title_td.td_2 {
	float: left;
	width: 550;
}

.title_td.td_3 {
	float: left;
	width: 300;
}

.title_td.td_4 {
	float: left;
	width: 200px;
}

.title_td.td_5 {
	float: right;
	width: 100px;
}

.workplace_td {
	position: absolute;
}

.workplace_td.icon_block {
	position: absolute;
	width: 30px;
	height: 30px;
	border-radius: 3px;
	margin: 10px 0 0 19px;
}

.workplace_td.icon_block.active {
	background: #B2D170;
}

.workplace_td.icon_block.not_active {
	background: #FF5943;
}

.workplace_td.pointer {
	margin: 14px 0 0 37px;
	display: none;
}

.workplace_td.icon.pointer a{
	display: block;
	width: 24px;
	height: 24px;
}

.workplace_td.title {
	margin: 0 0 0 35px;
}

.workplace_td.title p{
	color: #435063;
	font-size: 14px;
	font-weight: bold;
	margin: 17px 0 0 25px;
}

.workplace_td.date p{
	color: #435063;
	font-size: 14px;
	font-weight: bold;
	margin: 17px 0 0 20px;
}

.item_body{
	width: 1400px;
	height: 300px;
	background: #ffffff;
	border-radius: 0 0 5px 5px;
	/*margin: 0 0 0 40px;*/
	padding: 0 0 20px 0;
	box-shadow: 0px 6px 9px -4px rgba(0, 0, 0, .5);
	/*display: none;*/
}

.list_title {
	margin: 18px 0 0 5px;
}

.list_title h2{
	font-size: 16px;
	font-weight: bold;
}

.list_title p{
	color: #b5babc;
	font-size: 12px;
	font-weight: normal;
	margin: 5px 0 0 30px;
}

.list_row {
	float: left;
	width: 95.5%;
	background: #ffffff;
	height: 40px;
	box-shadow: 0 0 9px -4px rgba(0, 0, 0, .5);
}

.list_row p{
	color: #435063;
	font-size: 11px;
	font-weight: bold;
	margin: 13px 0 0 10px;
}

.list_row.title {
	margin: 15px 0 0 35px;
}

.list_row.workrow {
	margin: 5px 0 0px 35px;
}

.list_button{
	float: left;
	width: 10%;
	background: #ffffff;
	height: 36px;
	box-shadow: 0 0 9px -4px rgba(0, 0, 0, .5);
	margin: 25px 0 0px 35px;
}

.list_button_title p{
	color: #435063;
	font-size: 11px;
	font-weight: bold;
	margin: 13px 0 0 30px;
}

.list_button_icon {
	position: absolute;
	margin: 12px 0 0px 10px;
}

.list_hide{
	float: left;
	font-size: 12px;
	margin: 25px 0 0px 1295px;
}

.table_row.find_place {
	margin: 20px 40px 0 40px;
	width: 800px;
	height: 650px;
}

.table_row.find_place select{
	margin: 0 0 0 30px;
}

.find_label {
	float: left;
	width: 800px;
	margin: 30px 0 0 0;
}

.find_label label{
	color: #435063;
	font-size: 16px;
	margin: 0 0 0 30px;
	font-weight: bold;
}

.find_label input{
	margin: 0 0 0 10px;
	width: 243px;
}

.find_label.street input{
	width: 300px;
}

.find_label.home input{
	width: 90px;
}

.find_label.name input{
	width: 298px;
}

.button {
  position: relative;
  display: inline-block;
  font-size: 90%;
  font-weight: 700;
  color: rgb(209,209,217);
  text-decoration: none;
  text-shadow: 0 -1px 2px rgba(0,0,0,.2);
  padding: .5em 1em;
  outline: none;
  border-radius: 3px;
  background: linear-gradient(rgb(63, 76, 94), rgb(50, 58, 69)) rgb(63, 76, 94);
  box-shadow:
   0 1px rgba(255,255,255,.2) inset,
   0 3px 5px rgba(0,1,6,.5),
   0 0 1px 1px rgba(0,1,6,.2);
  transition: .2s ease-in-out;
  margin: 30px 0 0 30px;
}

.button:hover:not(:active) {
  background: linear-gradient(rgb(98, 114, 135), rgb(50, 58, 69)) rgb(98, 114, 135);
}

.button:active {
  top: 1px;
  background: linear-gradient(rgb(79, 96, 119), rgb(50, 58, 69)) rgb(79, 96, 119);
  box-shadow: 0 -1px 3px rgba(0,0,0,.3), 0 1px 1px #fff, inset 0 1px 2px rgba(0,0,0,.8), inset 0 -1px 0 rgba(0,0,0,.05);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
	<head>
		<link href="style.css" rel="stylesheet" type="text/css">
		<script src="jquery-3.2.1.min.js"></script>
		<script src="listhelpers.js"></script>
	</head>
	<body>
		<div class="site_header">
			<div class="site_logo_icon">
				<svg width="26" height="36" viewBox="0 0 26 36" fill="none" xmlns="http://www.w3.org/2000/svg">
					<path fill-rule="evenodd" clip-rule="evenodd" d="M4 8H22C25 8 25 11 25 11V32C25 32 25 35 22 35H3.73244C3.38663 35.5978 2.74028 36 2 36C0.89543 36 0 35.1046 0 34C0 32.8954 0.89543 32 2 32C2.74028 32 3.38663 32.4022 3.73244 33H21C23 33.0288 23 31 23 31V12C23 12 23 10 21 10H5C3 10 3 12 3 12V24.2676C3.5978 24.6134 4 25.2597 4 26C4 27.1046 3.10457 28 2 28C0.89543 28 0 27.1046 0 26C0 25.2597 0.402199 24.6134 1 24.2676V11C1 11 1 8 4 8ZM26 5C26 6 25 6 25 6H1C1 6 0 6 0 5C0 4 1 4 1 4H8V2C8 2 8 0 10 0H16C18 0 18 2 18 2V4H25C25 4 26 4 26 5ZM16 4V2H10V4H16ZM9 14C9 14 9 13 10 13C11 13 11 14 11 14V29C11 29 11 30 10 30C9 30 9 29 9 29V14ZM15 14C15 14 15 13 16 13C17 13 17 14 17 14V29C17 29 17 30 16 30C15 30 15 29 15 29V14Z" fill="#00D4FF"/>
				</svg>
			</div>
			<div class="site_logo_name">
				<p>ЭкоТэк</p>
			</div>
		</div>
		<div class="side_menu">
		</div>
		<div class="main_workplace">
			<div class="workplace_title">
				<h2>Лицевые счета</h2>
				<h3>Всего счетов: 50 000</h3>
			</div>
			<div class="table_row title_table">
				<div class="title_td td_1">
					<p class="title_table p">ЛИЦЕВОЙ СЧЁТ</p>
				</div>
				<div class="title_td td_2">
					<p class="title_table p">АДРЕС</p>
				</div>
				<div class="title_td td_3">
					<p class="title_table p">СОБСТВЕННИК</p>
				</div>
				<div class="title_td td_4">
					<p class="title_table p">НОМЕР ДОГОВОРА</p>
				</div>
				<div class="title_td td_5"></div>
			</div>
			<div class="table_row workplace_row">
				<div class="title_td td_1">
					<div class="workplace_td icon_block active">
						<svg class="svg_" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path fill-rule="evenodd" clip-rule="evenodd" d="M12 11V12H6V11H1V18H17V11H12ZM5 0V4H0V10H6V8H12V10H18V4H13V0H5ZM7 4L7 2H11V4H7ZM7 9H11V11H7V9Z" fill="white"/>
						</svg>
					</div>
					<div class="workplace_td title">
						<p>л/c № 3843050000</p>
					</div>
				</div>
				<div class="title_td td_2">
					<div class="workplace_td date">
						<p>653000, Кемеровская обл, Прокопьевск г, Селиванова ул, дом № 3, Кв. 7</p>
					</div>
				</div>
				<div class="title_td td_3">
					<div class="workplace_td date">
						<p>Наумов Вячеслав Викторович</p>
					</div>
				</div>
				<div class="title_td td_4">
					<div class="workplace_td date">
						<p>105298/2018</p>
					</div>
				</div>
				<div class="title_td td_5">
					<div class="workplace_td pointer">
							<svg  width="24" height="24" viewBox="0 0 330.59 401.98"  xmlns="http://www.w3.org/2000/svg">
								<path cfill-rule="evenodd" d="M73.67,164.16H206.33a15,15,0,0,0,0-30H73.67a15,15,0,1,0,0,30Z" fill="323a45"/>
								<path fill-rule="evenodd" d="M259.61,254h-8a16.27,16.27,0,0,0-16.26,16.26v19.65h40.56V270.24A16.27,16.27,0,0,0,259.61,254Z" fill="323a45"/>
								<path fill-rule="evenodd" d="M319.31,271.58v-1.34A59.8,59.8,0,0,0,280,214.13V73.7a14.82,14.82,0,0,0-4.34-10.48L216.78,4.34A14.82,14.82,0,0,0,206.3,0H29.11A29.14,29.14,0,0,0,0,29.11v312.1a29.14,29.14,0,0,0,29.11,29.11H180.59v1.44A30.26,30.26,0,0,0,210.82,402h89.54a30.26,30.26,0,0,0,30.23-30.22V295.12A30.18,30.18,0,0,0,319.31,271.58Zm-127.44-1.34v1.34a30.18,30.18,0,0,0-11.28,23.54v42.79h-149V32.41H185.7V76A19.12,19.12,0,0,0,204.81,95.1h43.58V210.62a59.42,59.42,0,0,0-36.14,14.75,15,15,0,0,0-5.92-1.21H73.67a15,15,0,1,0,0,30H194.09A59.3,59.3,0,0,0,191.87,270.24Zm113.72,45.24H287.82a8.11,8.11,0,1,0,0,16.22h17.77v15H287.82a8.12,8.12,0,0,0,0,16.23h17.77v8.83a5.23,5.23,0,0,1-5.23,5.22H210.82a5.23,5.23,0,0,1-5.23-5.22V295.12a5.23,5.23,0,0,1,5.23-5.23h6.05V270.24a34.73,34.73,0,0,1,34.7-34.7h8a34.73,34.73,0,0,1,34.7,34.7v19.65h6.05a5.23,5.23,0,0,1,5.23,5.23v20.36Z" fill="323a45"/>
							</svg>
					</div>
				</div>
				<div class="item_body">
				
				</div>
			</div>
			<div class="table_row workplace_row">
				<div class="title_td td_1">
					<div class="workplace_td icon_block active">
						<svg class="svg_" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path fill-rule="evenodd" clip-rule="evenodd" d="M12 11V12H6V11H1V18H17V11H12ZM5 0V4H0V10H6V8H12V10H18V4H13V0H5ZM7 4L7 2H11V4H7ZM7 9H11V11H7V9Z" fill="white"/>
						</svg>
					</div>
					<div class="workplace_td title">
						<p>л/c № 3843050000</p>
					</div>
				</div>
				<div class="title_td td_2">
					<div class="workplace_td date">
						<p>653000, Кемеровская обл, Прокопьевск г, Селиванова ул, дом № 3, Кв. 7</p>
					</div>
				</div>
				<div class="title_td td_3">
					<div class="workplace_td date">
						<p>Наумов Вячеслав Викторович</p>
					</div>
				</div>
				<div class="title_td td_4">
					<div class="workplace_td date">
						<p>105298/2018</p>
					</div>
				</div>
				<div class="title_td td_5">
					<div class="workplace_td pointer">
							<svg  width="24" height="24" viewBox="0 0 330.59 401.98"  xmlns="http://www.w3.org/2000/svg">
								<path cfill-rule="evenodd" d="M73.67,164.16H206.33a15,15,0,0,0,0-30H73.67a15,15,0,1,0,0,30Z" fill="323a45"/>
								<path fill-rule="evenodd" d="M259.61,254h-8a16.27,16.27,0,0,0-16.26,16.26v19.65h40.56V270.24A16.27,16.27,0,0,0,259.61,254Z" fill="323a45"/>
								<path fill-rule="evenodd" d="M319.31,271.58v-1.34A59.8,59.8,0,0,0,280,214.13V73.7a14.82,14.82,0,0,0-4.34-10.48L216.78,4.34A14.82,14.82,0,0,0,206.3,0H29.11A29.14,29.14,0,0,0,0,29.11v312.1a29.14,29.14,0,0,0,29.11,29.11H180.59v1.44A30.26,30.26,0,0,0,210.82,402h89.54a30.26,30.26,0,0,0,30.23-30.22V295.12A30.18,30.18,0,0,0,319.31,271.58Zm-127.44-1.34v1.34a30.18,30.18,0,0,0-11.28,23.54v42.79h-149V32.41H185.7V76A19.12,19.12,0,0,0,204.81,95.1h43.58V210.62a59.42,59.42,0,0,0-36.14,14.75,15,15,0,0,0-5.92-1.21H73.67a15,15,0,1,0,0,30H194.09A59.3,59.3,0,0,0,191.87,270.24Zm113.72,45.24H287.82a8.11,8.11,0,1,0,0,16.22h17.77v15H287.82a8.12,8.12,0,0,0,0,16.23h17.77v8.83a5.23,5.23,0,0,1-5.23,5.22H210.82a5.23,5.23,0,0,1-5.23-5.22V295.12a5.23,5.23,0,0,1,5.23-5.23h6.05V270.24a34.73,34.73,0,0,1,34.7-34.7h8a34.73,34.73,0,0,1,34.7,34.7v19.65h6.05a5.23,5.23,0,0,1,5.23,5.23v20.36Z" fill="323a45"/>
							</svg>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

Простите за большой код, все, что мог, убрал! Проблема в том, что появляющийся блок не смещает строку! Подскажите пожалуйста

3
  • Учитесь сокращать код и выкидывать из него несущественное, чтобы его можно было запихнуть сюда. Сейчас вопрос непонятен прям совсем
    – andreymal
    11 июн 2019 в 14:59
  • "Строки добавляются как надо, но при попытке добавить ещё один блок" добавить блок куда? Вниз? Вправо? В строку в виде столбца?
    – Arantler
    11 июн 2019 в 15:40
  • При попытке выполнить код, вы можете увидеть две строки с данными. При нажатии на верхнюю срабатывает скрипт делая видимым блок, добавленный под верхнюю строку. Когда он открывается нижняя строка должна сдвигаться. 12 июн 2019 в 4:31

1 ответ 1

0

Блок .table_row.workplace_row имеет фиксированую высоту. Из за этого следующий блок не смещается в низ. Когда блок "Активен" вам нужно менять его высоту на auto. В примере это делается через класс --is_show.

$(document).ready(function() {
  $('div.table_row.workplace_row').hover(
    function() {
      $(this).find('div.workplace_td.pointer').fadeIn(200)
    },
    function() {
      $(this).find('div.workplace_td.pointer').fadeOut(200)
    }).click(
    function() {
      $(this).find('div.item_body').fadeToggle(200);
      $(this).toggleClass('--is_show').css({
        'border-radius': '5px 5px 0 0'
      });
    }
  )
});
/* ---- New ---- */
.table_row.workplace_row {
  overflow: hidden;
}
.workplace_row.--is_show {
  height: auto !important;
}
/* ---- | ---- */

@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');
body,
html {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  background: #000;
}

h1,
h2,
h3,
h4,
label,
input {
  font-family: Roboto, sans-serif;
}

h2 {
  color: #435063;
  font-size: 22px;
  margin: 20px 0 0 30px;
}

h3 {
  color: #b5babc;
  font-size: 12px;
  font-weight: normal;
  margin: 5px 0 0 30px;
}

p {
  font-family: Roboto, sans-serif;
}

a {
  font-family: Roboto, sans-serif;
  text-decoration: none;
}

.site_header {
  position: absolute;
  width: 100% - 300px;
  background: #29313C;
  height: 66px;
  z-index: 2;
  left: 150px;
  right: 150px;
  top: 0%;
  bottom: 0%;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
}

.site_logo_icon {
  position: absolute;
  margin: 15px 0 0 27px;
}

.site_logo_name {
  position: absolute;
  margin: 17px 0 0 63px;
}

.site_logo_name p {
  color: #f2f2f2;
  font-size: 30px;
  font-weight: bold;
  margin: 0 0 0 0;
}

.side_menu {
  position: absolute;
  height: 100% - 66px;
  background: #323A45;
  width: 80px;
  z-index: 1;
  top: 66px;
  left: 150px;
  right: 0%;
  bottom: 0%;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

.side_button {
  float: left;
  width: 50px;
  height: 40px;
  background: #282E37;
  border-radius: 4px;
}

.side_button.first {
  margin: 30px 0 0 13px;
}

.side_button.second {
  margin: 5px 0 0 13px;
}

.side_button a {
  display: block;
  height: 40px;
  width: 50px;
}

.side_button img {
  margin: -18px 0 0 -29px;
}

.side_button_image {
  position: absolute;
  margin: 13px 0 0 16px;
}

.svg_ {
  margin: 6px 0 0 6px;
}

.svg_client {
  margin: 6px 0 0 8px;
}

.svg_error {
  margin: 13px 0 0 12px;
}

.svg_side_button {
  margin: 13px 0 0 16px;
}

.svg_side_find {
  margin: 8px 0 0 12px;
}

.svg_side_money {
  margin: 7.5px 0 0 12.5px;
}

.svg_side_report {
  margin: 7px 0 0 12.5px;
}

.main_workplace {
  position: absolute;
  background: #f2f2f2;
  height: 100% - 66px;
  width: 100% - 230px;
  top: 66px;
  left: 230px;
  right: 150px;
  bottom: 0%;
  overflow: auto;
}

.workplace_title {
  width: 400px;
  height: 42px;
  margin: 25px 0 0 10px;
}

.table_row {
  width: 1400px;
  background: #ffffff;
  border-radius: 5px;
  margin: 2px 30px 0;
  box-shadow: 0 0 9px -4px rgba(0, 0, 0, .5);
}

.table_row.workplace_row {
  margin: 5px 40px 0 40px;
  height: 50px;
}

.table_row.title_table {
  margin: 20px 40px 0 40px;
  height: 40px;
}

.title_td {
  height: 100%;
}

.title_td.td_1 {
  float: left;
  width: 250px;
}

.title_table.p {
  color: #435063;
  font-size: 13px;
  font-weight: bold;
  margin: 13px 20px 0;
}

.title_td.td_2 {
  float: left;
  width: 550;
}

.title_td.td_3 {
  float: left;
  width: 300;
}

.title_td.td_4 {
  float: left;
  width: 200px;
}

.title_td.td_5 {
  float: right;
  width: 100px;
}

.workplace_td {
  position: absolute;
}

.workplace_td.icon_block {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 3px;
  margin: 10px 0 0 19px;
}

.workplace_td.icon_block.active {
  background: #B2D170;
}

.workplace_td.icon_block.not_active {
  background: #FF5943;
}

.workplace_td.pointer {
  margin: 14px 0 0 37px;
  display: none;
}

.workplace_td.icon.pointer a {
  display: block;
  width: 24px;
  height: 24px;
}

.workplace_td.title {
  margin: 0 0 0 35px;
}

.workplace_td.title p {
  color: #435063;
  font-size: 14px;
  font-weight: bold;
  margin: 17px 0 0 25px;
}

.workplace_td.date p {
  color: #435063;
  font-size: 14px;
  font-weight: bold;
  margin: 17px 0 0 20px;
}

.item_body {
  width: 1400px;
  height: 300px;
  background: #ffffff;
  border-radius: 0 0 5px 5px;
  /*margin: 0 0 0 40px;*/
  padding: 0 0 20px 0;
  box-shadow: 0px 6px 9px -4px rgba(0, 0, 0, .5);
  /*display: none;*/
}

.list_title {
  margin: 18px 0 0 5px;
}

.list_title h2 {
  font-size: 16px;
  font-weight: bold;
}

.list_title p {
  color: #b5babc;
  font-size: 12px;
  font-weight: normal;
  margin: 5px 0 0 30px;
}

.list_row {
  float: left;
  width: 95.5%;
  background: #ffffff;
  height: 40px;
  box-shadow: 0 0 9px -4px rgba(0, 0, 0, .5);
}

.list_row p {
  color: #435063;
  font-size: 11px;
  font-weight: bold;
  margin: 13px 0 0 10px;
}

.list_row.title {
  margin: 15px 0 0 35px;
}

.list_row.workrow {
  margin: 5px 0 0px 35px;
}

.list_button {
  float: left;
  width: 10%;
  background: #ffffff;
  height: 36px;
  box-shadow: 0 0 9px -4px rgba(0, 0, 0, .5);
  margin: 25px 0 0px 35px;
}

.list_button_title p {
  color: #435063;
  font-size: 11px;
  font-weight: bold;
  margin: 13px 0 0 30px;
}

.list_button_icon {
  position: absolute;
  margin: 12px 0 0px 10px;
}

.list_hide {
  float: left;
  font-size: 12px;
  margin: 25px 0 0px 1295px;
}

.table_row.find_place {
  margin: 20px 40px 0 40px;
  width: 800px;
  height: 650px;
}

.table_row.find_place select {
  margin: 0 0 0 30px;
}

.find_label {
  float: left;
  width: 800px;
  margin: 30px 0 0 0;
}

.find_label label {
  color: #435063;
  font-size: 16px;
  margin: 0 0 0 30px;
  font-weight: bold;
}

.find_label input {
  margin: 0 0 0 10px;
  width: 243px;
}

.find_label.street input {
  width: 300px;
}

.find_label.home input {
  width: 90px;
}

.find_label.name input {
  width: 298px;
}

.button {
  position: relative;
  display: inline-block;
  font-size: 90%;
  font-weight: 700;
  color: rgb(209, 209, 217);
  text-decoration: none;
  text-shadow: 0 -1px 2px rgba(0, 0, 0, .2);
  padding: .5em 1em;
  outline: none;
  border-radius: 3px;
  background: linear-gradient(rgb(63, 76, 94), rgb(50, 58, 69)) rgb(63, 76, 94);
  box-shadow: 0 1px rgba(255, 255, 255, .2) inset, 0 3px 5px rgba(0, 1, 6, .5), 0 0 1px 1px rgba(0, 1, 6, .2);
  transition: .2s ease-in-out;
  margin: 30px 0 0 30px;
}

.button:hover:not(:active) {
  background: linear-gradient(rgb(98, 114, 135), rgb(50, 58, 69)) rgb(98, 114, 135);
}

.button:active {
  top: 1px;
  background: linear-gradient(rgb(79, 96, 119), rgb(50, 58, 69)) rgb(79, 96, 119);
  box-shadow: 0 -1px 3px rgba(0, 0, 0, .3), 0 1px 1px #fff, inset 0 1px 2px rgba(0, 0, 0, .8), inset 0 -1px 0 rgba(0, 0, 0, .05);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<head>
  <link href="style.css" rel="stylesheet" type="text/css">
  <script src="jquery-3.2.1.min.js"></script>
  <script src="listhelpers.js"></script>
</head>

<body>
  <div class="site_header">
    <div class="site_logo_icon">
      <svg width="26" height="36" viewBox="0 0 26 36" fill="none" xmlns="http://www.w3.org/2000/svg">
					<path fill-rule="evenodd" clip-rule="evenodd" d="M4 8H22C25 8 25 11 25 11V32C25 32 25 35 22 35H3.73244C3.38663 35.5978 2.74028 36 2 36C0.89543 36 0 35.1046 0 34C0 32.8954 0.89543 32 2 32C2.74028 32 3.38663 32.4022 3.73244 33H21C23 33.0288 23 31 23 31V12C23 12 23 10 21 10H5C3 10 3 12 3 12V24.2676C3.5978 24.6134 4 25.2597 4 26C4 27.1046 3.10457 28 2 28C0.89543 28 0 27.1046 0 26C0 25.2597 0.402199 24.6134 1 24.2676V11C1 11 1 8 4 8ZM26 5C26 6 25 6 25 6H1C1 6 0 6 0 5C0 4 1 4 1 4H8V2C8 2 8 0 10 0H16C18 0 18 2 18 2V4H25C25 4 26 4 26 5ZM16 4V2H10V4H16ZM9 14C9 14 9 13 10 13C11 13 11 14 11 14V29C11 29 11 30 10 30C9 30 9 29 9 29V14ZM15 14C15 14 15 13 16 13C17 13 17 14 17 14V29C17 29 17 30 16 30C15 30 15 29 15 29V14Z" fill="#00D4FF"/>
				</svg>
    </div>
    <div class="site_logo_name">
      <p>ЭкоТэк</p>
    </div>
  </div>
  <div class="side_menu">
  </div>
  <div class="main_workplace">
    <div class="workplace_title">
      <h2>Лицевые счета</h2>
      <h3>Всего счетов: 50 000</h3>
    </div>
    <div class="table_row title_table">
      <div class="title_td td_1">
        <p class="title_table p">ЛИЦЕВОЙ СЧЁТ</p>
      </div>
      <div class="title_td td_2">
        <p class="title_table p">АДРЕС</p>
      </div>
      <div class="title_td td_3">
        <p class="title_table p">СОБСТВЕННИК</p>
      </div>
      <div class="title_td td_4">
        <p class="title_table p">НОМЕР ДОГОВОРА</p>
      </div>
      <div class="title_td td_5"></div>
    </div>
    <div class="table_row workplace_row --is_show">
      <div class="title_td td_1">
        <div class="workplace_td icon_block active">
          <svg class="svg_" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path fill-rule="evenodd" clip-rule="evenodd" d="M12 11V12H6V11H1V18H17V11H12ZM5 0V4H0V10H6V8H12V10H18V4H13V0H5ZM7 4L7 2H11V4H7ZM7 9H11V11H7V9Z" fill="white"/>
						</svg>
        </div>
        <div class="workplace_td title">
          <p>л/c № 3843050000</p>
        </div>
      </div>
      <div class="title_td td_2">
        <div class="workplace_td date">
          <p>653000, Кемеровская обл, Прокопьевск г, Селиванова ул, дом № 3, Кв. 7</p>
        </div>
      </div>
      <div class="title_td td_3">
        <div class="workplace_td date">
          <p>Наумов Вячеслав Викторович</p>
        </div>
      </div>
      <div class="title_td td_4">
        <div class="workplace_td date">
          <p>105298/2018</p>
        </div>
      </div>
      <div class="title_td td_5">
        <div class="workplace_td pointer">
          <svg width="24" height="24" viewBox="0 0 330.59 401.98" xmlns="http://www.w3.org/2000/svg">
								<path cfill-rule="evenodd" d="M73.67,164.16H206.33a15,15,0,0,0,0-30H73.67a15,15,0,1,0,0,30Z" fill="323a45"/>
								<path fill-rule="evenodd" d="M259.61,254h-8a16.27,16.27,0,0,0-16.26,16.26v19.65h40.56V270.24A16.27,16.27,0,0,0,259.61,254Z" fill="323a45"/>
								<path fill-rule="evenodd" d="M319.31,271.58v-1.34A59.8,59.8,0,0,0,280,214.13V73.7a14.82,14.82,0,0,0-4.34-10.48L216.78,4.34A14.82,14.82,0,0,0,206.3,0H29.11A29.14,29.14,0,0,0,0,29.11v312.1a29.14,29.14,0,0,0,29.11,29.11H180.59v1.44A30.26,30.26,0,0,0,210.82,402h89.54a30.26,30.26,0,0,0,30.23-30.22V295.12A30.18,30.18,0,0,0,319.31,271.58Zm-127.44-1.34v1.34a30.18,30.18,0,0,0-11.28,23.54v42.79h-149V32.41H185.7V76A19.12,19.12,0,0,0,204.81,95.1h43.58V210.62a59.42,59.42,0,0,0-36.14,14.75,15,15,0,0,0-5.92-1.21H73.67a15,15,0,1,0,0,30H194.09A59.3,59.3,0,0,0,191.87,270.24Zm113.72,45.24H287.82a8.11,8.11,0,1,0,0,16.22h17.77v15H287.82a8.12,8.12,0,0,0,0,16.23h17.77v8.83a5.23,5.23,0,0,1-5.23,5.22H210.82a5.23,5.23,0,0,1-5.23-5.22V295.12a5.23,5.23,0,0,1,5.23-5.23h6.05V270.24a34.73,34.73,0,0,1,34.7-34.7h8a34.73,34.73,0,0,1,34.7,34.7v19.65h6.05a5.23,5.23,0,0,1,5.23,5.23v20.36Z" fill="323a45"/>
							</svg>
        </div>
      </div>
      <div class="item_body">

      </div>
    </div>
    <div class="table_row workplace_row">
      <div class="title_td td_1">
        <div class="workplace_td icon_block active">
          <svg class="svg_" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path fill-rule="evenodd" clip-rule="evenodd" d="M12 11V12H6V11H1V18H17V11H12ZM5 0V4H0V10H6V8H12V10H18V4H13V0H5ZM7 4L7 2H11V4H7ZM7 9H11V11H7V9Z" fill="white"/>
						</svg>
        </div>
        <div class="workplace_td title">
          <p>л/c № 3843050000</p>
        </div>
      </div>
      <div class="title_td td_2">
        <div class="workplace_td date">
          <p>653000, Кемеровская обл, Прокопьевск г, Селиванова ул, дом № 3, Кв. 7</p>
        </div>
      </div>
      <div class="title_td td_3">
        <div class="workplace_td date">
          <p>Наумов Вячеслав Викторович</p>
        </div>
      </div>
      <div class="title_td td_4">
        <div class="workplace_td date">
          <p>105298/2018</p>
        </div>
      </div>
      <div class="title_td td_5">
        <div class="workplace_td pointer">
          <svg width="24" height="24" viewBox="0 0 330.59 401.98" xmlns="http://www.w3.org/2000/svg">
								<path cfill-rule="evenodd" d="M73.67,164.16H206.33a15,15,0,0,0,0-30H73.67a15,15,0,1,0,0,30Z" fill="323a45"/>
								<path fill-rule="evenodd" d="M259.61,254h-8a16.27,16.27,0,0,0-16.26,16.26v19.65h40.56V270.24A16.27,16.27,0,0,0,259.61,254Z" fill="323a45"/>
								<path fill-rule="evenodd" d="M319.31,271.58v-1.34A59.8,59.8,0,0,0,280,214.13V73.7a14.82,14.82,0,0,0-4.34-10.48L216.78,4.34A14.82,14.82,0,0,0,206.3,0H29.11A29.14,29.14,0,0,0,0,29.11v312.1a29.14,29.14,0,0,0,29.11,29.11H180.59v1.44A30.26,30.26,0,0,0,210.82,402h89.54a30.26,30.26,0,0,0,30.23-30.22V295.12A30.18,30.18,0,0,0,319.31,271.58Zm-127.44-1.34v1.34a30.18,30.18,0,0,0-11.28,23.54v42.79h-149V32.41H185.7V76A19.12,19.12,0,0,0,204.81,95.1h43.58V210.62a59.42,59.42,0,0,0-36.14,14.75,15,15,0,0,0-5.92-1.21H73.67a15,15,0,1,0,0,30H194.09A59.3,59.3,0,0,0,191.87,270.24Zm113.72,45.24H287.82a8.11,8.11,0,1,0,0,16.22h17.77v15H287.82a8.12,8.12,0,0,0,0,16.23h17.77v8.83a5.23,5.23,0,0,1-5.23,5.22H210.82a5.23,5.23,0,0,1-5.23-5.22V295.12a5.23,5.23,0,0,1,5.23-5.23h6.05V270.24a34.73,34.73,0,0,1,34.7-34.7h8a34.73,34.73,0,0,1,34.7,34.7v19.65h6.05a5.23,5.23,0,0,1,5.23,5.23v20.36Z" fill="323a45"/>
							</svg>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.