html - 表格 td 元素在错误的列下换行

Question

我有一个表格，当浏览器窗口变窄时，它会折叠在错误的列下，使阅读变得困惑。即来自:

到:

如何让最后一个文本框换行到正确的列下？我尝试将 border collapse css 设置为“separate”，但没有任何区别。我的 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>

Answer 1

<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>