垂直线问题

Question

我在放置垂直线时面临问题。在这里，我创建了小提琴和附加参考。请帮帮我。提前谢谢。

Answer 1

我可以通过以下两种方式回答：

1）边距使您的线不会延伸。使用填充代替将解决这个问题。

2）更重要的是，由于这是表格数据，标记应该使用表格。它还将为您提供您在语义上所寻求的外观，而不需要所有额外的类/ css。

以下是使用表格的更新jsfiddle：http://jsfiddle.net/haltersweb/e6o446o3/3/

代码如下：

table {
    margin: 10px;
    border-collapse:collapse;
    border-spacing:0;
}
th, td {
    margin: 0;
    padding: 0 10px 10px 10px;
    vertical-align: top;
    text-align: left;
}
th:first-child,
td:first-child {
    border-right: 1px solid green;
    text-align: center;
}
.accessibly-hidden {
    position: absolute !important;
	display: block;
	visibility: visible;
	overflow: hidden;
	width: 1px;
	height: 1px;
	margin: -1px;
	border: 0;
	padding: 0;
	clip: rect(0 0 0 0);
}

<form>
    <table>
        <thead>
            <tr>
                <th>Arrived</th>
                <th>RAC Status</th>
                <th>Luggage</th>
                <th><span class="accessibly-hidden">Name</span></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" checked="checked" /></td>
                <td>
                    <select>
                        <option selected="selected">Not Enrolled</option>
                        <option>Enrolled</option>
                    </select>
                </td>
                <td>
                    <select>
                        <option selected="selected">1</option>
                        <option>2</option>
                        <option>3</option>
                    </select>
                </td>
                <td>
                    Doe, John
                </td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>
                    <select>
                        <option>Not Enrolled</option>
                        <option selected="selected">Enrolled</option>
                    </select>
                </td>
                <td>
                    <select>
                        <option>1</option>
                        <option selected="selected">2</option>
                        <option>3</option>
                    </select>
                </td>
                <td>
                    Doe, Jane
                </td>
            </tr>
        </tbody>
    </table>
</form>