行中單元格的引導表放置

Question

我有一個包含 2 列的 Bootstrap 表，正確顯示如下：

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <table class="table table-bordered"> <tr> <td>Address One:</td> <td><input type="text" class="form-control" name="shipToAddressOne" id="shipToAddressOne" placeholder="Address One" value=""></td> </tr> <tr> <td>Address Two:</td> <td><input type="text" class="form-control" name="shipToAddressTwo" id="shipToAddressTwo" placeholder="Address Two" value=""></td> </tr> <tr> <td>Suburb:</td> <td><input type="text" class="form-control" name="shipToSuburb" id="shipToSuburb" placeholder="Suburb" value=""></td> </tr> <tr> <td>State:</td> <td> <select class="form-control shipmentState" name="shipToState" id="shipToState"> <option value=""></option> <option value="ACT">ACT</option> <option value="NSW">NSW</option> <option value="NT">NT</option> <option value="QLD">QLD</option> <option value="SA">SA</option> <option value="TAS">TAS</option> <option value="VIC">VIC</option> <option value="WA">WA</option> </select> </td> </tr> <tr> <td>Postcode:</td> <td><input type="text" class="form-control" name="shipToPostcode" id="shipToPostcode" placeholder="Postcode" value=""></td> </tr> <tr> <td>Country:</td> <td> <select class="form-control shipmentCountry" name="shipToCountry" id="shipToCountry"> <option value=""></option> <option value="Australia">Australia</option> <option value="Japan">Japan</option> </select> </td> </tr> <tr> <td>Phone:</td> <td><input type="text" class="form-control" name="shipToPhone" id="shipToPhone" placeholder="Phone" value=""></td> </tr> </table>

我現在想將 State 和 Postcode 組合起來，這樣它們就出現在同一行，因為它們每個都不需要很多空間，但是當我組合它們時，它們會像這樣延伸到其他行之外：

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <table class="table table-bordered"> <tr> <td>Address One:</td> <td><input type="text" class="form-control" name="shipToAddressOne" id="shipToAddressOne" placeholder="Address One" value=""></td> </tr> <tr> <td>Address Two:</td> <td><input type="text" class="form-control" name="shipToAddressTwo" id="shipToAddressTwo" placeholder="Address Two" value=""></td> </tr> <tr> <td>Suburb:</td> <td><input type="text" class="form-control" name="shipToSuburb" id="shipToSuburb" placeholder="Suburb" value=""></td> </tr> <tr> <td>State:</td> <td> <select class="form-control shipmentState" name="shipToState" id="shipToState"> <option value=""></option> <option value="ACT">ACT</option> <option value="NSW">NSW</option> <option value="NT">NT</option> <option value="QLD">QLD</option> <option value="SA">SA</option> <option value="TAS">TAS</option> <option value="VIC">VIC</option> <option value="WA">WA</option> </select> </td> <td>Postcode:</td> <td><input type="text" class="form-control" name="shipToPostcode" id="shipToPostcode" placeholder="Postcode" value=""></td> </tr> <tr> <td>Country:</td> <td> <select class="form-control shipmentCountry" name="shipToCountry" id="shipToCountry"> <option value=""></option> <option value="Australia">Australia</option> <option value="Japan">Japan</option> </select> </td> </tr> <tr> <td>Phone:</td> <td><input type="text" class="form-control" name="shipToPhone" id="shipToPhone" placeholder="Phone" value=""></td> </tr> </table>

而且我無法弄清楚如何保持原始寬度並將州/郵政編碼組合到原始寬度中。

Answer 1

我已經通過在每個元素中添加 colspan="2" 來嘗試這個。 這樣每個 td 在每行中的寬度為 2 列，除了 State 和 Postcode 行。

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <table class="table table-bordered"> <tr> <td colspan="2">Address One:</td> <td colspan="2"><input type="text" class="form-control" name="shipToAddressOne" id="shipToAddressOne" placeholder="Address One" value=""></td> </tr> <tr> <td colspan="2">Address Two:</td> <td colspan="2"><input type="text" class="form-control" name="shipToAddressTwo" id="shipToAddressTwo" placeholder="Address Two" value=""></td> </tr> <tr> <td colspan="2">Suburb:</td> <td colspan="2"><input type="text" class="form-control" name="shipToSuburb" id="shipToSuburb" placeholder="Suburb" value=""></td> </tr> <tr> <td>State:</td> <td> <select class="form-control shipmentState" name="shipToState" id="shipToState"> <option value=""></option> <option value="ACT">ACT</option> <option value="NSW">NSW</option> <option value="NT">NT</option> <option value="QLD">QLD</option> <option value="SA">SA</option> <option value="TAS">TAS</option> <option value="VIC">VIC</option> <option value="WA">WA</option> </select> </td> <td>Postcode:</td> <td><input type="text" class="form-control" name="shipToPostcode" id="shipToPostcode" placeholder="Postcode" value=""></td> </tr> <tr> <td colspan="2">Country:</td> <td colspan="2"> <select class="form-control shipmentCountry" name="shipToCountry" id="shipToCountry"> <option value=""></option> <option value="Australia">Australia</option> <option value="Japan">Japan</option> </select> </td> </tr> <tr> <td colspan="2">Phone:</td> <td colspan="2"><input type="text" class="form-control" name="shipToPhone" id="shipToPhone" placeholder="Phone" value=""></td> </tr> </table>

為了使它看起來更好，您可以右對齊標簽。