时间戳

首页 > 解决方案 > 将垂直图表制作成水平图表CSS3

html - 将垂直图表制作成水平图表CSS3

问题描述

我正在尝试将水平图表转换为垂直图表。我遇到了一个问题。当我将代码更改为水平时，我无法让连接到框的线条出现在中间。我可以让盒子水平出现。

原始 Codepen 演示

我的代码：

<div class="container">
    <table class="boxplot">
      <tr height="40">
        <td class="line boxplot-max"></td>
        <td class="boxplot-max"></td>
        <td class="boxplot-q3" colspan="4"></td>
        <td class="boxplot-mdn" colspan="4"></td>
        <td class="line boxplot-q1"></td>
        <td class="boxplot-q1"></td>
      </tr>
    </table>
</div>

JSFiddle 演示

标签： htmlcssstyles

解决方案

推荐阅读