How to set html table's width property in ASP.Net MVC5
<p>I am trying to add scrollbar to my html table and then change the width of the table columns to my liking but table's column width is not getting affected. Here is my table html.</p>

<p>So basically what I want is that the table's width should be as per the parent container's width (tbody->inherit below). And then add the columns to the table and set their width as per my liking. If the table needs horizontal scrolling it should appear. The problem is column width is not getting changed with below markup and hence scrolling is not working as desired.</p>

<pre><code>// css code for trial purpose
&lt;style type="text/css"&gt;
    .col1 {
        width: 75%;
    }
&lt;/style&gt;

&lt;table class="table" style="table-layout: fixed; overflow:scroll"&gt;
&lt;tbody style="display: block; overflow: scroll; height:400px; width: inherit"&gt;
    &lt;tr&gt;
        &lt;th class="col1"&gt; // also tried style="width:25%" and class="col-lg-2" as well
            @Html.DisplayNameFor(model =&gt; model.Project.PROJECT_NO)
        &lt;/th&gt;
        &lt;th&gt;
            @Html.DisplayNameFor(model =&gt; model.Project.TITLE)
        &lt;/th&gt;
        &lt;th&gt;
            @Html.DisplayNameFor(model =&gt; model.Project.DESCRIPTION)
        &lt;/th&gt;
        &lt;th &gt;
            @Html.DisplayNameFor(model =&gt; model.Project.AWARD_DATE)
        &lt;/th&gt;
        &lt;th &gt;
            @Html.DisplayNameFor(model =&gt; model.Project.SCH_START_DATE)
        &lt;/th&gt;
        &lt;th&gt;
            @Html.DisplayNameFor(model =&gt; model.Project.SCH_END_DATE)
        &lt;/th&gt;
        &lt;th&gt;&lt;/th&gt;
    &lt;/tr&gt;

    @foreach (var item in Model)
    {
        &lt;tr&gt;
            &lt;td&gt;
                @Html.DisplayFor(modelItem =&gt; item.Project.PROJECT_NO)
            &lt;/td&gt;
            &lt;td&gt;
                @Html.DisplayFor(modelItem =&gt; item.Project.TITLE)
            &lt;/td&gt;
            &lt;td&gt;
                @Html.DisplayFor(modelItem =&gt; item.Project.DESCRIPTION)
            &lt;/td&gt;
            &lt;td&gt;
                @Html.DisplayFor(modelItem =&gt; item.Project.AWARD_DATE)
            &lt;/td&gt;
            &lt;td&gt;
                @Html.DisplayFor(modelItem =&gt; item.Project.SCH_START_DATE)
            &lt;/td&gt;
            &lt;td&gt;
                @Html.DisplayFor(modelItem =&gt; item.Project.SCH_END_DATE)
            &lt;/td&gt;
            &lt;td&gt;
                @Html.ActionLink("Edit", "Edit", new { id = item.Project.ID }) |
                @Html.ActionLink("Details", "Details", new { id = item.Project.ID }) |
                @Html.ActionLink("Delete", "Delete", new { id = item.Project.ID })
            &lt;/td&gt;
        &lt;/tr&gt;
    }
&lt;/tbody&gt;
</code></pre>

<p></p>

<p>P.S: this is a Visual studio 2013's default ASP.Net MVC 5 application so the css and bootstrap code is unchanged.</p>