test log search

by T1MOXA

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="card">
    <div class="card-block">
        <div class="table-responsive">
            <table class="table m-b-0 ">
                <thead>
                    <tr class="text-capitalize">
                        <th>Администратор</th>
						<th>Игрок</th>
                        <th>Дата</th>
                        <th>Тип</th>
                        <th>Сервер</th>
                        <th>Длительность</th>
                    </tr>
                </thead>
                <tbody>
                    <tr data-toggle="tooltip" data-placement="top" title="П.П. 1.1.2. Шум, посторонние звуки,транслирование музыки">
                        <td><img class="avatar" src="https://i.pinimg.com/originals/1e/aa/75/1eaa75496c78dc65c9c7358cd8dd759a.jpg"><a href="#"> ヴラッドMLG Тюленьハ</a></td>
						<td><img class="avatar" src="https://i.pinimg.com/originals/1e/aa/75/1eaa75496c78dc65c9c7358cd8dd759a.jpg"><a href="#"> ヴラッドMLG Тюленьハ</a></td>
                        <td>2018-07-31 12:19:12</td>
                        <td>Чат</td>
                        <td>8</td>
                        <td>1 минута</td>
                    </tr>
                    <tr data-toggle="tooltip" data-placement="top" title="П.П. 1.1.2. Шум, посторонние звуки,транслирование музыки">
                        <td><img class="avatar" src="https://i.pinimg.com/originals/1e/aa/75/1eaa75496c78dc65c9c7358cd8dd759a.jpg"><a href="#"> {Ramzes}</a></td>
						<td><img class="avatar"...

CSS

.content img {
    margin-right: 15px;
    float: left;
}

.avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.avatar-big {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 3px solid #FFF;
}

.bg-primary {
    background-color: #607D8B !important;
    color: #fff;
    padding: 30px;
}

.f-w-300 {
    font-weight: 300;
}

.f-w-400 {
    font-weight: 400;
}

.card {
    margin: 10px;
    border: none;
    -webkit-box-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.05), 0 -2px 1px -2px rgba(0, 0, 0, 0.04), 0 0 0 -1px rgba(0, 0, 0, 0.05);
    box-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.05), 0 -2px 1px -2px rgba(0, 0, 0, 0.04), 0 0 0 -1px rgba(0, 0, 0, 0.05);
}

.card:hover {
    -webkit-box-shadow: 0 0 25px -5px #9e9c9e;
    box-shadow: 0 0 25px -5px #9e9c9e;
    -webkit-transition: all 150ms linear;
    transition: all 150ms linear;
}

body {
    font-size: 15px;
    overflow-x: hidden;
    background-color: #E5E5E5;
    font-family: 'Open Sans', sans-serif;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    padding-left: 250px;
    padding-right: 250px;
}

.tooltip-inner {
    max-width: 550px;
}

tr:hover {
    background-color: #f2f2f2;
}

JavaScript

$("[data-toggle='tooltip']").tooltip();