垂直線問題

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; 
 
\t display: block; 
 
\t visibility: visible; 
 
\t overflow: hidden; 
 
\t width: 1px; 
 
\t height: 1px; 
 
\t margin: -1px; 
 
\t border: 0; 
 
\t padding: 0; 
 
\t 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>