Home>
I want to add a vertical dashed line to

th.
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">
<head>
<meta charset = "utf-8">
<link rel = "stylesheet" type = "text/css" href = "./ css/reset.css">
<link rel = "stylesheet" type = "text/css" href = "./ css/test.css">
</head>
<body>
<main>
    <div>
        <div>
            <div>
                <table>
                    <caption>caption</caption>
                    <tr>
                        <th>info</th>
                        <td>detail</td>
                    </tr>
                    <tr>
                        <th>info</th>
                        <td>detail</td>
                   </tr>
                   <tr>
                        <th>info</th>
                        <td>detail</td>
                   </tr>
                   <tr>
                        <th>info</th>
                        <td>detail</td>
                   </tr>
                </table>
           </div>
        </div>
    </div>
</main>
</body>
</html>
. 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
Mac10.13.6

  • Answer # 1

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

    http://www.htmq.com/style/border-spacing.shtml
    <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.
    Also

    .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?
    https://developer.mozilla.org/en/docs/Web/CSS/border-style