html - 表td元素在错误的列下环绕

我有一张表，当浏览器窗口缩小时，该表在错误的列下折叠，使它难以读取。即来自：


至：


如何获得最后一个要包装在正确列下的文本框？我尝试将边框折叠CSS设置为“分离”，但没有区别。我的html看起来像这样：

<style>
.inline {
    display: inline-block;
}
</style>

  <table>
      @for (int i = 0; i < 3; i++)
        {
          <tr>
             <td>
                <label>Tries</label>
                 <label class="ui-checkbox">
                  @Html.CheckBoxFor(m => m.Input.LockFixtureDates, new {@class = ""}) <span></span>
             </label>
            </td>
           <td>
              <label class="inline">Max points</label>
                  <div class="inline ">
                     @Html.TextBoxFor(m => m.Input.PointsForWalkover, new {@class = "form-control width-20", max = "", min = "0", type = "number", value = ""})
                    </div>
                  </td>
          <td>
             <label>Has bonus points</label>
             <label class="ui-checkbox">
             @Html.CheckBoxFor(m => m.Input.LockFixtureDates, new {@class = ""}) <span></span>
             </label>
         </td>
          <td>
             <div class="inline ">
                 @Html.TextBoxFor(m => m.Input.PointsForWalkover, new {@class = "form-control width-40", max = "", min = "0", type = "number", value = ""})
              </div>
               <label class="inline">bonus points for more than or equal to</label>
               <div class="inline ">
                   @Html.TextBoxFor(m => m.Input.PointsForWalkover, new {@class = "form-control width-40", max = "", min = "0", type = "number", value = ""})
              </div>

            </td>
         </tr>
     }
   </table>

最佳答案

<td>
         <div class="inline ">
             @Html.TextBoxFor(m => m.Input.PointsForWalkover, new {@class = "form-control width-40", max = "", min = "0", type = "number", value = ""})
          </div>
           <label class="inline">bonus points for more than or equal to</label>
           <div class="inline ">
               @Html.TextBoxFor(m => m.Input.PointsForWalkover, new {@class = "form-control width-40", max = "", min = "0", type = "number", value = ""})
          </div>

        </td>

将此最后的td更改为

  <td>
                 <div class="inline ">
                     @Html.TextBoxFor(m => m.Input.PointsForWalkover, new {@class = "form-control width-40", max = "", min = "0", type = "number", value = ""})
                  </div>
                   <label class="inline">bonus points for more than or equal to</label>

                </td>
<td>
<div class="inline ">
                       @Html.TextBoxFor(m => m.Input.PointsForWalkover, new {@class = "form-control width-40", max = "", min = "0", type = "number", value = ""})
                  </div>
</td>