title: Set max width of bootstrap responsive table
body: <p>The problem I am having is that I have a row (the description row) in my table that is the column span of all the columns in the table.  This works fine when the table doesn't go responsive:</p>
  
  <p><a href="https://i.stack.imgur.com/IwiyN.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IwiyN.jpg" alt="enter image description here"></a></p>
  
  <p>However, when the window is resized into a smaller size the table turns resonsive and the description row takes on a very large width due to the text all being on one line:</p>
  
  <p><a href="https://i.stack.imgur.com/serx5.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/serx5.jpg" alt="enter image description here"></a></p>
  
  <p>Here is my code for the table:</p>
  
  <pre><code>&lt;div class="table-responsive"&gt;
  &lt;table class="table"&gt;
      &lt;tr&gt;
          &lt;th&gt;
              @Html.ActionLink("Title", "Details", new { id = Model.TaskGroup.ID, sortOrder = ViewBag.NameSortParm, currentFilter = ViewBag.CurrentFilter }) &lt;i class="fa fa-unsorted" aria-hidden="true"&gt;&lt;/i&gt;
          &lt;/th&gt;
          &lt;th&gt;
              @Html.ActionLink("Code", "Details", new { id = Model.TaskGroup.ID, sortOrder = ViewBag.CodeSortParm, currentFilter = ViewBag.CurrentFilter }) &lt;i class="fa fa-unsorted" aria-hidden="true"&gt;&lt;/i&gt;
          &lt;/th&gt;
          &lt;th&gt;
              @Html.ActionLink("Supervisor", "Details", new { id = Model.TaskGroup.ID, sortOrder = ViewBag.SupervisorSortParm, currentFilter = ViewBag.CurrentFilter }) &lt;i class="fa fa-unsorted" aria-hidden="true"&gt;&lt;/i&gt;
          &lt;/th&gt;
          &lt;th&gt;
              Preference
          &lt;/th&gt;
          &lt;th&gt;
  
          &lt;/th&gt;
  
          &lt;th&gt;&lt;/th&gt;
      &lt;/tr&gt;
  
  
      @foreach (var item in Model.TaskEntitiesPaged)
      {
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;b&gt;
                      @Html.DisplayFor(modelItem =&gt; item.Name)
                  &lt;/b&gt;
                  &lt;br /&gt;
                  @foreach (var tag in item.TaskEntityAssociatedTags)
                  {
                      &lt;a class="btn btn-default btn-xs" title="@tag.Tag.TagName"&gt;
                          &lt;i class="" aria-hidden="true"&gt;&lt;/i&gt; @tag.Tag.TagName
                      &lt;/a&gt;
                  }
              &lt;/td&gt;
              &lt;td&gt;
                  @Html.DisplayFor(modelItem =&gt; item.Code)
              &lt;/td&gt;
              &lt;td&gt;
                  @Html.DisplayFor(modelItem =&gt; item.AspNetUser.Forename)
                  @Html.DisplayFor(modelItem =&gt; item.AspNetUser.Surname)
  
              &lt;/td&gt;
  
              &lt;td&gt;
                  @{
          var list = new TaskEntityAndPreferencesModel(item, Model.Preferences);
                  }
                  @Html.Partial("_Rating", list)
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;a class="btn btn-primary btn-xs" href="@Url.Action("Details", "TaskEntities", new { id = item.ID })" title="More Details"&gt;
                      &lt;i class="fa fa-file-text-o" aria-hidden="true"&gt;&lt;/i&gt; Details
                  &lt;/a&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  @*@Html.ActionLink("Edit", "Edit", new { id = item.CourseID }) |
                      @Html.ActionLink("Details", "Details", new { id = item.CourseID }) |
                      @Html.ActionLink("Delete", "Delete", new { id = item.CourseID })*@
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
  
              &lt;td colspan="5"&gt;
                  @Html.Raw(Html.Encode(item.Description.Length &gt; 900 ? item.Description.Substring(0, 900) + @"..." : item.Description).Replace("\n", "&lt;br /&gt;"))
              &lt;/td&gt;
          &lt;/tr&gt;
      }
  
  &lt;/table&gt;
  </code></pre>
  
  <p></p>
  
  <p>I have tried searching for a way of setting a max width for the responsive table to no avail, ive also tried setting the column width for the headers but that didn't work either.  Any help is appreciated.</p>