CODEWITHSUNDEEP
javascripthtmlcss
Julien
Julien

Reputation: 9432

A column of a table needs to stay in one line (HTML/CSS/Javascript)

So I am having an issue on my entrepreneur business opportunity rating matrix : I would like the radio buttons to stay on the same line. The problem is that I don't know how I should process because if I give a fixed minimum width for the cell, i'm not sure it will display properly on other browsers, and if the cell is to big I loose the alignment of the radio buttons.

Do you guys have a CSS/Javascript (jQuery) trick that would fix this ?

Thank you

Upvotes: 2

Views: 1608

Answers (2)

Eineki
Eineki

Reputation: 14909

I would redesign the table layout (note this is a quick and dirt solution) to place the buttons below the labels (you save space in smaller window sizes).

<tr class="even">
  <td rowspan="2">Customer atlernatives</td>
  <td class="col_g left-aligned">A lot</td>
  <td class="col_d right-aligned">Few</td>
</tr>
<tr class="even">
  <td class="col_m centered">
    <form method="post" action="action" class="bz_op_val">
      <input type="radio" value="4" name="38">
      <input type="radio" value="3" name="38">
      <input type="radio" value="2" name="38">
      <input type="radio" value="1" name="38">
      <input type="radio" value="0" name="38">
    </form>
  </td>
</tr>

a better solution should be, to me:

<tr class="even">
  <td>Customer atlernatives</td>
  <td>
    <div class="col_g left-aligned">A lot</div>
    <div class="col_d right-aligned">Few</div>
    <form method="post" action="action" class="bz_op_val cleared-both-centered">
      <input type="radio" value="4" name="38">
      <input type="radio" value="3" name="38">
      <input type="radio" value="2" name="38">
      <input type="radio" value="1" name="38">
      <input type="radio" value="0" name="38">
    </form>
  </td>
</tr>

Upvotes: 0

Chris Lercher
Chris Lercher

Reputation: 37778

That's easy: Just add white-space: nowrap; to your td.

Upvotes: 6

Related Questions