Расстояние между строками таблицы и их границами. HTML

348

25 ноября 2017, 08:40

Какими средствами в html можно сделать таблицу как на картинке?

Здесь расстояние не просто между строками, а между границами строк. Каждая строка как отдельный элемент со своей отдельной границей, между которыми видно основной фон.

Answer 1

Удалось повторить в виде таблицы то, что изображено на картинке в вопросе.

body { background-color: #f1f1f1; } 
 
#rootTable { 
  margin-left: auto; 
  margin-right: auto; 
  height: 100px; 
  width: 550px; 
  border-spacing: 2px 5px; 
} 
#rootTable > tbody > tr > td { 
  border: 1px solid darkgray; 
  background-color: white; 
} 
#rootTable > tbody > tr > td:first-child { 
  text-align: center; 
  width: 10%; 
  border-top-left-radius: 10px; 
  border-bottom-left-radius: 10px; 
} 
#rootTable > tbody > tr > td:last-child { 
  width: 90%; 
  border-top-right-radius: 10px; 
  border-bottom-right-radius: 10px; 
} 
#rootTable > tbody > tr:hover > td { 
  background-color: lightgreen; 
} 
 
.innerTable { 
  border-collapse: collapse; 
  height: 100%; 
  width: 100%; 
} 
.innerTable > tbody > tr > td { 
  border: none; 
  padding: 4px; 
} 
.innerTable > tbody > tr > td:first-child { 
  width: 65%; 
} 
.innerTable > tbody > tr > td:nth-child(2) { 
  width: 20%; 
} 
.innerTable > tbody > tr > td:last-child { 
  width: 15%; 
} 
 
.person-name { font-weight: bold; } 
.person-info { font-style: italic; } 
.dates { text-align: right; } 
.price, .paid { text-align: center; }

<body> 
<br/> 
<br/> 
<table id="rootTable"> 
<tbody> 
<tr> 
<td>36</td> 
<td> 
<table class="innerTable"> 
<tbody> 
<tr> 
<td class="person-name">Petya +1111111111</td> 
<td class="dates">from 11.06</td> 
<td class="price">$100.10</td> 
</tr> 
<tr> 
<td class="person-info">A good person</td> 
<td class="dates">to 15.07</td> 
<td class="paid">$110.00</td> 
</tr> 
</tbody> 
</table> 
</td> 
</tr> 
<tr> 
<td>49</td> 
<td> 
<table class="innerTable"> 
<tbody> 
<tr> 
<td class="person-name">Tanya +222222222</td> 
<td class="dates">from 16.06</td> 
<td class="price">$20.00</td> 
</tr> 
<tr> 
<td class="person-info">A very good person</td> 
<td class="dates">to 20.07</td> 
<td class="paid">$40.00</td> 
</tr> 
</tbody> 
</table> 
</td> 
</tr> 
</tbody> 
</table> 
</body>

Answer 2

Изменение ответа.

для создания таких таблиц можно делать вручную или использовать PHP с функцией SWITCH (или CASE. точно не помню)

пример использования HTML + PHP:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            width: 100%;
            background-color: #FFFFFF;
        }
        .parent {
            padding: 4px;
            width: 60%;
            height: 60px;
            margin: 10px 20% 0 20%;
            background-color: #c3ffff;
            border-radius: 10px;
        }
        .parent > div{
            display: inline-block;
        }
        .child_1{
            margin-top: 10px;
            text-align: center;
            float: left;
            width: 10%;
        }

        .child_2{
            width: 80%;
        }
    </style>
</head>
<body>
<?php
$number_of_tables = 10; //измени число на любое другое от 0 до infinite
for ($x = 0; $x < $number_of_tables; $x++) {
    echo "<div class='parent'>
    <div class='child_1'> $x<br>October
    </div>
    <div class= ='child_2'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt<br>
        ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation<br>
        ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    </div>";
}
?>
<div class="parent">
    <div class="child_1">13 <br>October
    </div>
    <div class="child_2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt<br>
        ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation<br>
        ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</body>
</html>

Если не хочешь вставлять PHP - используй чистый HTML:

.parent { 
  padding: 4px; 
  width: 60%; 
  height: 60px; 
  margin: 10px 20% 0 20%; 
  background-color: #c3ffff; 
  border-radius: 10px; 
} 
 
#parent>div { 
  display: inline-block; 
} 
 
.child_1 { 
  margin-top: 10px; 
  text-align: center; 
  float: left; 
  width: 10%; 
} 
 
.child_2 { 
  width: 80%; 
}

<div class="parent"> 
  <div class="child_1">13 <br>October 
  </div> 
  <div class="child_2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt<br> ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation<br> ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
</div> 
<div class="parent"> 
  <div class="child_1">12 <br>October 
  </div> 
  <div class="child_2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt<br> ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation<br> ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
</div>

Примечание: код не идеальный. просто пример того, что можно сделать в твоем случае

Создание интернет-магазина игрушек в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Преобразование sql-запроса в Laravel 5.3 Eloquent

У меня запрос sql выглядит так

270

MySQL

Выборка sql без повторений

Добрый день!

394

Изменение цвета View из ViewModel

Как изменить цвет View из ViewModel

402

Синхронизация событий мыши в WPF

Я хочу, чтобы у меня объекты в Canvas двигались при нажатие мыши и перемещение по горизонталиВсё получается отлично, кроме того, что если я не двигаю...

368