How can I align the elements in a table cell ()?

Question

In trying to get the label and select element to align to the right of the row, I tried this:

<tr>
  <td>
    <input type="radio" id="ucemployee" name="travelertype"/>UC Employee
    <label for="selectcampus">UC Campus:</label>
    <select id="selectcampus" title="Please select a campus" align="right">
        <option value="pleaseselect">Please Select</option>
        <option value="ucsc">UC Santa Cruz</option>
        <option value="ucb">UC Berkeley</option>
        <option value="ucd">UC Davis</option>
        <option value="uci">UC Irvine</option>
        <option value="ucla">UC Los Angeles</option>
        <option value="ucm">UC Merced</option>
        <option value="ucr">UC Riverside</option>
        <option value="ucsd">UC San Diego</option>
        <option value="ucsf">UC San Francisco</option>
        <option value="ucsb">UC Santa Barbara</option>
    </select>
  </td>
<tr>

...but it doesn't work.

If I do this:

<td align="right">
    <input type="radio" id="ucemployee" name="travelertype"/>UC Employee
    . . .
    <select id="selectcampus" title="Please select a campus">
    . . .

...all of the elements align right, including the input radio element (as is to be expected, really), but I want the "radio" to remain aligned to the left.

How can I right align the label and select, while leaving the radio alone?

Do I need to put a "shiv" between the radio and the select, or...???

score 4 · Accepted Answer · edited May 23 '17 at 11:55

Here are two simple CSS methods to align-right only selected items in a td.

CSS Flexbox method.

#flex-container {
  display: flex;
}

label {
  margin-left: auto;
}


/* nonessential decorative styles */
table { width: 100%; }
td { border: 1px dashed black; background-color: aqua; padding: 5px; }
label { margin-right: 5px; }

<table>
  <tr>
    <td>
      <div id="flex-container"><!-- new wrapper -->
        <input type="radio" id="ucemployee" name="travelertype" />UC Employee
        <label for="selectcampus">UC Campus:</label>
        <select id="selectcampus" title="Please select a campus" align="right">
          <option value="pleaseselect">Please Select</option>
          <option value="ucsc">UC Santa Cruz</option>
          <option value="ucb">UC Berkeley</option>
          <option value="ucd">UC Davis</option>
          <option value="uci">UC Irvine</option>
          <option value="ucla">UC Los Angeles</option>
          <option value="ucm">UC Merced</option>
          <option value="ucr">UC Riverside</option>
          <option value="ucsd">UC San Diego</option>
          <option value="ucsf">UC San Francisco</option>
          <option value="ucsb">UC Santa Barbara</option>
        </select>
      </div>
    </td>
    <tr>
</table>

DEMO

Notes:

The content is wrapped in a div so the display value of the td doesn't need to be changed, which could affect the table layout algorithm.
Learn more about flex auto margins here: In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

CSS inline-block method

#right-align {
  display: inline-block;
  text-align: right;
  width: 95%;
}

/* non-essential decorative styles */
table { width: 100%; }
td { border: 1px dashed black; background-color: aqua; padding: 5px; }

<table>
  <tr>
    <td>
      <input type="radio" id="ucemployee" name="travelertype" />

      <div id="right-align">
        <label for="selectcampus">UC Campus:</label>
        <select id="selectcampus" title="Please select a campus" align="right">
            <option value="pleaseselect">Please Select</option>
            <option value="ucsc">UC Santa Cruz</option>
            <option value="ucb">UC Berkeley</option>
            <option value="ucd">UC Davis</option>
            <option value="uci">UC Irvine</option>
            <option value="ucla">UC Los Angeles</option>
            <option value="ucm">UC Merced</option>
            <option value="ucr">UC Riverside</option>
            <option value="ucsd">UC San Diego</option>
            <option value="ucsf">UC San Francisco</option>
            <option value="ucsb">UC Santa Barbara</option>
        </select>
      </div>
    </td>
  </tr>
</table>

DEMO

score 1 · Answer 2 · answered Aug 19 '15 at 00:06

Don't understand the actual arrangements you are trying to say but i hope this will help.play with the css and labels to rearrange.

<style>
td{
    float:right;
}
select,label[for=selectcampus],label[for=ucemployee]{
    float:right;
    text-align:left;
}
input[type="radio"]
{
    float:left;
}
</style>
<td>
    <label for="ucemployee">UC Employee</label>
    <input type="radio" id="ucemployee" name="travelertype"/>
    <select id="selectcampus" title="Please select a campus" align="right">
        <option value="pleaseselect">Please Select</option>
        <option value="ucsc">UC Santa Cruz</option>
        <option value="ucb">UC Berkeley</option>
        <option value="ucd">UC Davis</option>
        <option value="uci">UC Irvine</option>
        <option value="ucla">UC Los Angeles</option>
        <option value="ucm">UC Merced</option>
        <option value="ucr">UC Riverside</option>
        <option value="ucsd">UC San Diego</option>
        <option value="ucsf">UC San Francisco</option>
        <option value="ucsb">UC Santa Barbara</option>
    </select>
    <label for="selectcampus">UC Campus:</label>
</td>

score 0 · Answer 3 · answered Aug 18 '15 at 22:53

0

I think you need some CSS.

#test{
float:right;}

http://jsfiddle.net/m4onhxa9/

answered Aug 18 '15 at 22:53

lv0gun9

591
7
23

How can I align the elements in a table cell ()?

3 Answers3