0

I have Razor page with a table. enter image description here All looks fine until I apply jquery bootgrid. Column width become fixed and data is truncated. Column width become fixed and data is truncated.

How can I keep the column width to auto so that data is not truncated ? How can I keep the column width to auto so that data is not truncated ?

enter image description here

  <table id="grid"  class="table table-condensed table-hover table-striped">
            <thead>
                 <tr>
                     <th data-column-id="Nominal">
                         Nominal
                     </th>
                     <th data-column-id="TD">
                        Tradedate / Valuedate
                    </th>
                    <th data-column-id="ReleaseDate">
                        ReleaseDate
                    </th>
                     <th data-column-id="Fund">
                       Fund
                    </th>
                    <th data-column-id="Pre-Pay">
                        Pre-Pay
                    </th>
                    <th data-column-id="Comment">
                        Comment
                    </th>
                </tr>
            </thead>
            <tbody>

                @foreach (var item in Model)
                {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.Nominal)
                    </td>

                    <td>
                        @Html.DisplayFor(modelItem => item.TD) <br />
                        @Html.DisplayFor(modelItem => item.VD)

                    </td>

                    <td>
                        @Html.DisplayFor(modelItem => item.ReleaseDate)
                    </td>

                    <td>
                        @Html.DisplayFor(modelItem => item.Fund)
                    </td>
                    <td>
                       @Html.DisplayFor(modelItem => item.Pre_Pay)
                    </td>

                    <td>
                        @Html.DisplayFor(modelItem => item.Comment)

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

    <script type="text/javascript">

            document.addEventListener('DOMContentLoaded', function () {
                $("#grid").bootgrid({
                    caseSensitive: false

                })

            });

        </script>
Jalle
  • 1,566
  • 5
  • 22
  • 42
  • Please post code that replicates your problem. We cannot help you otherwise. Please post code that replicates your problem. We cannot help you otherwise. – Mihai T Dec 21 '18 at 12:16
  • This is the whole code. After applying the bootgrid columns are narrowed – Jalle Dec 21 '18 at 12:29
  • If i copy/paste this code in a snippet, it won't replicate your situation . Please make a stackoverflow code snippet that replicates your problem – Mihai T Dec 21 '18 at 12:30

1 Answers1

0

SOLVED: style = "table-layout: auto;" is what I needed.

Jalle
  • 1,566
  • 5
  • 22
  • 42