CODEWITHSUNDEEP
htmlcss
morne
morne

Reputation: 4179

Align multiple cell items on more than one row in a table

I have the following.

enter image description here

it more or less represents this in pseudo

<table>
    <tr>
        <td>Depart Base</td>
        <td>*time box*</td>
        <td>*time box*</td>
    </tr>
    <tr>
        <td>Mode of Transport</td>
        <td>
            <input type='checkbox'>
            <label>Dedicated ambulance</label>
            <input type='checkbox'>
            <label>AIR</label>
        </td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td>
            <input type='checkbox'>
            <label>Other ambulance</label>
            <input type='checkbox'>
            <label>Taxi</label>
        </td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td>
            <input type='checkbox'>
            <label>RRV</label>
            <input type='checkbox'>
            <label>Other</label>
        </td>
        <td></td>
    </tr>
</table>

But as you can see the radio buttons are not aligned.

This was also done with a inhouse form creator(which is not going to change)

How can I space or align the items in the cell?

Upvotes: 0

Views: 40

Answers (4)

Jamie Barker
Jamie Barker

Reputation: 8246

This is supposing that your markup cannot be changed, and that you would always have two checkboxes with two labels.

This will fill the cell to it's maximum width, if your table is wider it will obviously look a lot better:

table td input {
  width: 5%;
  display: inline-block;
  box-sizing: border-box;
  margin: 0;
  vertical-align: middle;
}
table td label {
  width: 40%;
  display: inline-block;
  box-sizing: border-box;
  vertical-align: middle;
}
<table>
  <tr>
    <td>Depart Base</td>
    <td>*time box*</td>
    <td>*time box*</td>
  </tr>
  <tr>
    <td>Mode of Transport</td>
    <td>
      <input type='checkbox' />
      <label>Dedicated ambulance</label>
      <input type='checkbox' />
      <label>AIR</label>
    </td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td>
      <input type='checkbox' />
      <label>Other ambulance</label>
      <input type='checkbox' />
      <label>Taxi</label>
    </td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td>
      <input type='checkbox' />
      <label>RRV</label>
      <input type='checkbox' />
      <label>Other</label>
    </td>
    <td></td>
  </tr>
</table>

Upvotes: 1

j08691
j08691

Reputation: 207901

The standard advice is don't use tables for layout. Use them for tabular data. But if you're stuck using that chunk of code, you can use this CSS:

label:nth-of-type(1) {
  width: 150px;
  display: inline-block
}
<table>
  <tr>
    <td>Depart Base</td>
    <td>*time box*</td>
    <td>*time box*</td>
  </tr>
  <tr>
    <td>Mode of Transport</td>
    <td>
      <input type='checkbox'>
      <label>Dedicated ambulance</label>
      <input type='checkbox'>
      <label>AIR</label>
    </td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td>
      <input type='checkbox'>
      <label>Other ambulance</label>
      <input type='checkbox'>
      <label>Taxi</label>
    </td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td>
      <input type='checkbox'>
      <label>RRV</label>
      <input type='checkbox'>
      <label>Other</label>
    </td>
    <td></td>
  </tr>
</table>

Upvotes: 1

Pete
Pete

Reputation: 58422

You can make your label an inline-block element and give it a width:

label {
  display: inline-block;
  width: 10em;
  /*or width of your largest label*/
}
<table>
  <tr>
    <td>Depart Base</td>
    <td>*time box*</td>
    <td>*time box*</td>
  </tr>
  <tr>
    <td>Mode of Transport</td>
    <td>
      <input type='checkbox'>
      <label>Dedicated ambulance</label>
      <input type='checkbox'>
      <label>AIR</label>
    </td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td>
      <input type='checkbox'>
      <label>Other ambulance</label>
      <input type='checkbox'>
      <label>Taxi</label>
    </td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td>
      <input type='checkbox'>
      <label>RRV</label>
      <input type='checkbox'>
      <label>Other</label>
    </td>
    <td></td>
  </tr>
</table>

Upvotes: 1

C3roe
C3roe

Reputation: 96250

If you can’t change the markup, then your only chance is to give the first label in every cell a “large enough” width, something like this:

td label:nth-of-type(1) { display:inline-block; width:9.5em; }

http://jsfiddle.net/ao2rqtnc/1/

A width of 9.5em seems about to work (with default font applied), but depending on this and other factors it might need more.

Upvotes: 1

Related Questions