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

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 {&nbsp; display: flex;}.col {&nbsp; flex: 1;&nbsp; padding: 1.2rem 0;}.barLeft {&nbsp; position:relative;&nbsp; border-right: 3px dashed #CCC;&nbsp; text-align: right;}.barRight {&nbsp; position:relative;}.barLeft::before, .barRight::before {&nbsp; position:absolute;&nbsp; content: '';&nbsp; top:50%;&nbsp; margin-top: -1px; /* half of the border */&nbsp; border-top: 2px dotted #CCC;&nbsp; left: 0;&nbsp; width: 100%;&nbsp; height:50%;&nbsp; z-index: -1;}.barRight span{&nbsp; position: relative;&nbsp; background-color: red;&nbsp; display: inline-block;&nbsp; height: 10px;&nbsp; margin-left: -1.5px; /* half the vert border */&nbsp; z-index: 1;&nbsp; border-radius: 0 5px 5px 0;}.barLeft span{&nbsp; position: relative;&nbsp; background-color: blue;&nbsp; display: inline-block;&nbsp; height: 10px;&nbsp; margin-left: -1.5px; /* half the vert border */&nbsp; z-index: 1;&nbsp; border-radius: 5px 0 0 5px;&nbsp; margin-right: -1.5px;}<section>&nbsp; <div class="row">&nbsp; &nbsp; <div class="col">FOOO</div>&nbsp; &nbsp; <div class="col">BAR</div>&nbsp; &nbsp; <div class="col">GOO</div>&nbsp; &nbsp; <div class="col">World</div>&nbsp; &nbsp; <div class="col barLeft"><span style="width:10%"></span></div>&nbsp; &nbsp; <div class="col barRight"><span style="width:50%"></span></div>&nbsp; &nbsp; <div class="col">100</div>&nbsp; </div>&nbsp; <div class="row">&nbsp; &nbsp; <div class="col">1</div>&nbsp; &nbsp; <div class="col">2</div>&nbsp; &nbsp; <div class="col">3</div>&nbsp; &nbsp; <div class="col">4</div>&nbsp; &nbsp; <div class="col barLeft"><span style="width:20%"></span></div>&nbsp; &nbsp; <div class="col barRight"><span style="width:30%"></span></div>&nbsp; &nbsp; <div class="col">7</div>&nbsp; </div>&nbsp;&nbsp;</section>