Create a new <td> if it exceeds a certain width?

Question

In my MVC site, I have a these lines of code:

<h2>@Model.Question</h2>
    @using (Html.BeginForm("Index", "Result", FormMethod.Post))
    {
        <table cellspacing="10">
            <tr>
                @foreach (string answer in Model.Answers)
                {
                    <td><input type="radio" name="answer" value="@answer" /><span>@answer</span></td>
                }
            </tr>
        </table>
        <div id="footer">
            <input class="btn btn-success" direction="false" type="submit" name="Back" value="Back" />
            <input class="btn btn-success" type="submit" />
        </div>
    }

(Ignore the currently poorly implement first button in the footer)

The <input type="radio... returns the same amount of radio buttons as answers from a database. My problem is that for one question, there are a lot of answers and it starts making the page scroll sideways, as shown in the image below

What I want to happen is for the radio buttons to start on a new line, possibly in another <td> , when it starts to go too far sideways. Possibly done when it hits the border of a surrounding div I could create? Or when it exceeds a certain pixel width? I am not quite sure how to approach this at all. Thanks in advance!

Answer 1

Instead of using tables for your job, it is better to use DIV with fixed width (or percentage width) and floating them left so they stick together in one line. When there will be too much elements for one line, they will automatically jump to a new line. This will also work if you will change width of your browser.

CSS part:

.elements {
  border: 1px solid red;
}

.elements:before,
.elements:after{
  display: table;
  content: " ";
}

.elements:after {
  clear: both;
}

.element {
  float: left;
  min-height: 1px;
  border: 1px solid blue;
  margin: 2px;
}

HTML Part:

<div class="elements">
  <div class="element">
    <input type="radio" name="radio" value="" /> Radio
  </div>
  <div class="element">
    <input type="radio" name="radio" value="" /> Radio
  </div>
  <div class="element">
    <input type="radio" name="radio" value="" /> Radio
  </div>
  <div class="element">
    <input type="radio" name="radio" value="" /> Radio
  </div>
  <div class="element">
    <input type="radio" name="radio" value="" /> Radio
  </div>
  <div class="element">
    <input type="radio" name="radio" value="" /> Radio
  </div>
  <div class="element">
    <input type="radio" name="radio" value="" /> Radio
  </div>
  <div class="element">
    <input type="radio" name="radio" value="" /> Radio
  </div>
  <div class="element">
    <input type="radio" name="radio" value="" /> Radio
  </div>
  <div class="element">
    <input type="radio" name="radio" value="" /> Radio
  </div>
  <div class="element">
    <input type="radio" name="radio" value="" /> Radio
  </div>
  <div class="element">
    <input type="radio" name="radio" value="" /> Radio
  </div>
  <div class="element">
    <input type="radio" name="radio" value="" /> Radio
  </div>
  <div class="element">
    <input type="radio" name="radio" value="" /> Radio
  </div>
</div>

https://jsfiddle.net/4xvdcw9b/2/

Answer 2

If using table is not necessary you can try this approach:

<ul>
                    @foreach (string answer in Model.Answers)
                    {
                        <li><input type="radio" name="answer" value="@answer" /><span>@answer</span></li>
                    }
            </ul>

with this styles:

ul
{
   max-width:300px;
list-style-type: none;
}

li
{
   display: inline; 
}