Bootstrap Table Placement of Cells in Row-CodePudding

I have a Bootstrap table with 2 columns which appears correctly as follows:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<table >
  <tr>
    <td>Address One:</td>
    <td><input type="text"  name="shipToAddressOne" id="shipToAddressOne" placeholder="Address One" value=""></td>
  </tr>
  <tr>
    <td>Address Two:</td>
    <td><input type="text"  name="shipToAddressTwo" id="shipToAddressTwo" placeholder="Address Two" value=""></td>
  </tr>
  <tr>
    <td>Suburb:</td>
    <td><input type="text"  name="shipToSuburb" id="shipToSuburb" placeholder="Suburb" value=""></td>
  </tr>
  <tr>
    <td>State:</td>
    <td>
      <select  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"  name="shipToPostcode" id="shipToPostcode" placeholder="Postcode" value=""></td>
  </tr>
  <tr>
    <td>Country:</td>
    <td>
      <select  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"  name="shipToPhone" id="shipToPhone" placeholder="Phone" value=""></td>
  </tr>
</table>

I would now like to combine the State and Postcode so they appear on the same line as they don't require a lot of space each, but when I combine these they stretch outside of the other rows like this:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<table >
  <tr>
    <td>Address One:</td>
    <td><input type="text"  name="shipToAddressOne" id="shipToAddressOne" placeholder="Address One" value=""></td>
  </tr>
  <tr>
    <td>Address Two:</td>
    <td><input type="text"  name="shipToAddressTwo" id="shipToAddressTwo" placeholder="Address Two" value=""></td>
  </tr>
  <tr>
    <td>Suburb:</td>
    <td><input type="text"  name="shipToSuburb" id="shipToSuburb" placeholder="Suburb" value=""></td>
  </tr>
  <tr>
    <td>State:</td>
    <td>
      <select  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"  name="shipToPostcode" id="shipToPostcode" placeholder="Postcode" value=""></td>
  </tr>
  <tr>
    <td>Country:</td>
    <td>
      <select  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"  name="shipToPhone" id="shipToPhone" placeholder="Phone" value=""></td>
  </tr>
</table>

and I can't work out how to keep the original width and combine the state/postcode into that original width.

CodePudding user response：

I have tried this by adding colspan="2" in each element. So that each td takes a width of 2 columns in each row except State and Postcode row.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<table >
  <tr>
    <td colspan="2">Address One:</td>
    <td colspan="2"><input type="text"  name="shipToAddressOne" id="shipToAddressOne" placeholder="Address One" value=""></td>
  </tr>
  <tr>
    <td colspan="2">Address Two:</td>
    <td colspan="2"><input type="text"  name="shipToAddressTwo" id="shipToAddressTwo" placeholder="Address Two" value=""></td>
  </tr>
  <tr>
    <td colspan="2">Suburb:</td>
    <td colspan="2"><input type="text"  name="shipToSuburb" id="shipToSuburb" placeholder="Suburb" value=""></td>
  </tr>
  <tr>
    <td>State:</td>
    <td>
      <select  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"  name="shipToPostcode" id="shipToPostcode" placeholder="Postcode" value=""></td>
  </tr>
  <tr>
    <td colspan="2">Country:</td>
    <td colspan="2">
      <select  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"  name="shipToPhone" id="shipToPhone" placeholder="Phone" value=""></td>
  </tr>
</table>

Further to make it look better you can right-align the labels.