I want to add a vertical dashed line to

I want to implement "before" element with "th" "width" fixed value

Error message

The broken lines are connected and the intervals are not uniform.

Applicable source code
<! DOCTYPE html>
<html lang = "en">
<meta charset = "utf-8">
<link rel = "stylesheet" type = "text/css" href = "./ css/reset.css">
<link rel = "stylesheet" type = "text/css" href = "./ css/test.css">
. information {
    font-family: "Ming Dynasty", YuMincho, "Hiragino Mincho ProN W3",
    "Hiragino Mincho ProN", "HG Mincho E", "MS P Mincho", "MS Mincho", serif;
    font-weight: normal;
    float: left;
    width: 500px;

caption {
    font-size: 24px;
    font-weight: bold;
    text-align: left;
    padding-bottom: 20px;
    border-bottom: solid 1px # 9362c4;
    margin-bottom: 30px;
.info1, .info2, .info3, .info4, .detail {
    font-size: 18px;
    padding-bottom: 34px;
.info1, .info2, .info3, .info4 {
    text-align: left;
    vertical-align: middle;
    width: 120px;
    box-sizing: border-box;
.info1, .info2, .info3, .info4,: before {
    border-right: 1px dashed # 9362c4;
.detail {
    padding-left: 25px;

Tried Supplemental information (FW/tool version etc.)

google chrome 67.0.3396.99

  • Answer # 1

    border-collapse: separate;
    border-spacing: 0px 3px;
    I think that it becomes the display of hope by adding.

    <Excerpts below>
    The border-spacing property is used to specify the border between adjacent cells. The border-spacing property is valid when the value of the border-collapse property is separate.

    When one value is specified: The [Up/Down/Left/Right] interval is the specified value.
    When two values ​​are specified: The left/right and top/bottom intervals are in the specified order.

    Negative values ​​cannot be specified for the border-spacing property.

  • Answer # 2

    First of all, is the broken line connected? Since the border-right is specified for each th class, not th border-right, if the start point and the end point are exactly the same height, they will be connected like this time.

    .info1, .info2, .info3 .info4, .detail {No comma between // 3 and 4

    Because of the above, CSS is not applied to the bottom two th elements.
    It's not because of reset.css.
    Because it is a destination, we have not confirmed the operation of the answer on the smartphone.

  • Answer # 3

    The view we see now: (I don't know anything)

  • Answer # 4

    border-style dashed line The length is implementation dependent. Isn't it better to use border-image if you want to display it exactly?