很难尝试用彩色线条和元素制作一张桌子

Question

这是我有疑问和我必须做的这是我到目前为止所做的我很难解决这个问题，我怀疑我如何才能在元素之间留出这个空间，还有这个用灰色和红色着色的边框以及它们两者之间的垂直线，我只能用纯 HTML、CSS 和 JS 来做到这一点没有任何框架/lib/api。我尝试过类似的方法，但仍然无法按我想要的方式工作，如果有人可以提供帮助，我将不胜感激    .table {    display: inline-flex;    margin-top: 0rem;       margin-left: 5rem;         }.fgraphs {    position: relative;    height: 20px;    width: 100px;  }  .fgraphs:before,  .fgraphs:after {    content: "";    position: absolute;    top: 50%;    right: 0;    transform: translateY(-50%);  }  .fgraphs:before {    border-bottom: 2px dashed #979797;    width: 100%;  }  .fgraphs:after {    border-bottom: 3.5px solid #F03D24;    width: 50%;    border-radius: 4px 0 0 4px;  }    <table class="table">            <tbody>                <tr>                    <td>Domingo</td>                    <td>Icone</td>                    <td>54%</td>                    <td><img src="./images/cloudy-day-3.svg" alt=""></td>                    <td>20ºC</td>                    <td class="fgraphs"></td>                    <td>32ºC</td>                </tr>                <tr>                    <td>Segunda</td>                    <td>Icone</td>                    <td>54%</td>                    <td><img src="./images/cloudy-day-3.svg" alt=""></td>                    <td>20ºC</td>                    <td class="fgraphs"></td>                    <td>32ºC</td>                </tr>                <tr>                    <td>Terça</td>                    <td>Icone</td>                    <td>54%</td>                    <td><img src="./images/cloudy-day-3.svg" alt=""></td>                    <td>20ºC</td>                    <td class="fgraphs"></td>                    <td>32ºC</td>                </tr>

Answer 1

我已经看到您已经为这种布局苦苦挣扎了几天。以为我会有所帮助并向您展示 flexbox 的基本概念以及使用前后元素。

header,

.row {

  display: flex;

}

.col {

  flex: 1;

  padding: 1.2rem 0;

}

.barLeft {

  position:relative;

  border-right: 3px dashed #CCC;

  text-align: right;

}

.barRight {

  position:relative;

}

.barLeft::before, .barRight::before {

  position:absolute;

  content: '';

  top:50%;

  margin-top: -1px; /* half of the border */

  border-top: 2px dotted #CCC;

  left: 0;

  width: 100%;

  height:50%;

  z-index: -1;

}

.barRight span{

  position: relative;

  background-color: red;

  display: inline-block;

  height: 10px;

  margin-left: -1.5px; /* half the vert border */

  z-index: 1;

  border-radius: 0 5px 5px 0;

}

.barLeft span{

  position: relative;

  background-color: blue;

  display: inline-block;

  height: 10px;

  margin-left: -1.5px; /* half the vert border */

  z-index: 1;

  border-radius: 5px 0 0 5px;

  margin-right: -1.5px;

}

<section>

  <div class="row">

    <div class="col">FOOO</div>

    <div class="col">BAR</div>

    <div class="col">GOO</div>

    <div class="col">World</div>

    <div class="col barLeft"><span style="width:10%"></span></div>

    <div class="col barRight"><span style="width:50%"></span></div>

    <div class="col">100</div>

  </div>

  <div class="row">

    <div class="col">1</div>

    <div class="col">2</div>

    <div class="col">3</div>

    <div class="col">4</div>

    <div class="col barLeft"><span style="width:20%"></span></div>

    <div class="col barRight"><span style="width:30%"></span></div>

    <div class="col">7</div>

  </div>  

</section>