Я уверен, что есть очень простой способ исправить мою проблему. К сожалению, я действительно неопытен в разработке интерфейса, но я должен исправить свою проблему. Вкратце, в моей таблице есть динамические рамки, но это должно быть несколько пробелов между каждым полем.css границы с равным интервалом
Теперь это выглядит как ниже изображение
Однако, это должно быть, как показано ниже изображения
Мой код находится ниже. Как я могу это сделать с изменением CSS?
.bg {
width: 100%;
padding-left: 2px;
padding-right: 2px;
}
.chart {
border: solid 1px #e31515;
color: #e31515;
width: 100%;
position: absolute;
overflow: hidden;
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<span style="overflow: hidden;left: 550px; height: 150px; width: 250px; position: absolute; "> <div >
<table cellpadding="2" border="1">
<tbody>
<tr>
<td style="overflow: hidden; border-top: #e9e8e8 1px solid; border-right: 0px; width: 1%; white-space: nowrap; border-bottom: #e9e8e8 1px solid; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; padding-right: 0px; background-color: transparent">
<div class="bg" style="height: 129px">
<div class="chart" style="height: 14px; margin-top: 115px"></div>
</div>
</td>
<td style="overflow: hidden; border-top: #e9e8e8 1px solid; border-right: 0px; width: 1%; white-space: nowrap; border-bottom: #e9e8e8 1px solid; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; padding-right: 0px; background-color: transparent">
<div class="bg" style="height: 129px">
<div class="chart" style=" height: 14px; margin-top: 115px"></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</span>
<span style="overflow: hidden;left: 150px; height: 150px; width: 250px; position: absolute; ">
<div >
<table cellpadding="2" border="1">
<tbody>
<tr>
<td style="overflow: hidden; border-top: #e9e8e8 1px solid; border-right: 0px; width: 1%; white-space: nowrap; border-bottom: #e9e8e8 1px solid; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; padding-right: 0px; background-color: transparent" >
<div class="bg" style="height: 129px">
<div class="chart" style="height: 14px; margin-top: 115px"></div>
</div>
</td>
<td style="overflow: hidden; border-top: #e9e8e8 1px solid; border-right: 0px; width: 1%; white-space: nowrap; border-bottom: #e9e8e8 1px solid; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; padding-right: 0px; background-color: transparent" >
<div class="bg" style="height: 129px">
<div class="chart" style="height: 14px; margin-top: 115px"></div>
</div>
</td>
<td style="overflow: hidden; border-top: #e9e8e8 1px solid; border-right: 0px; width: 1%; white-space: nowrap; border-bottom: #e9e8e8 1px solid; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; padding-right: 0px; background-color: transparent" >
<div class="bg" style="height: 129px">
<div class="chart" style="height: 14px; margin-top: 115px"></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</span>
Спасибо за редактирование. – Grcn