locked
Increase width of column in table RRS feed

  • Question

  • User-501297529 posted

    I want to increase the size of the middle row in this table so it is the widest row and the first and third rows are smaller in width. I tried to put a style width = 70% on the middle row but that didn't do anything. I need assistance on how to do this.

     <table id="itemsTable" class="table  table-bordered display responsive nowrap" style="width: 100%">
                            <tbody>
                                @foreach (var Item in Model.ToView.DorItems ?? Enumerable.Empty<DorItem>())
                                {
                                    <tr><td colspan="3"></td></tr>
                                    <tr style="background-color: #f9f9f9"><td colspan="3"><b>@item.Category.Name</b></td></tr>
                                    <tr>
                                        <td>@Html.Raw(item.Responsibility)</td>
                                        <td style="text-align: left">
                                            @Html.Raw(item.Description)
                                            <div class="verticalspace"></div>
                                            @foreach (var response in Model.Responses)
                                            {
                                                <div style="border: solid black 1px; background-color:#eeeeee">
    
                                                    <b>@Html.Raw(response.DateCreated.ToString("MM/dd/yyyy")) @Html.Raw(response.Title)</b>
                                                    <div class="verticalspace"></div>
                                                    @Html.Raw(response.Response)
                                                </div>
                                            }
                                        </td>
                                        <td><b>@item.Status.Name</b></td>
                                    </tr>
                                }
                            </tbody>
                        </table>

    I bolded the column that I want to increase width size.

    Thursday, October 31, 2019 1:10 PM

Answers

  • User-501297529 posted

    This is what a row of what it looks like with data

    CEO (Bob Parker) and Board of Directors December 31, 2019 5) Charge off the two insurance premium participation loans per your policy. These loans will be delinquent more than 6 months with no payments, which meets your charge off guidelines @ 9-30-2010 – management indicates that the originating credit union is close to bundling these insurance premium loans. Completed

    This is what I want it to look like

    CEO (Bob Parker) and Board of Directors December 31, 2019 5) Charge off the two insurance premium participation loans per your policy. These loans will be delinquent more than 6 months with no payments, which meets your charge off guidelines @ 9-30-2019 – management indicates that the originating credit union is close to bundling these insurance premium loans. Completed

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, October 31, 2019 6:39 PM

All replies

  • User475983607 posted

    I want to increase the size of the middle row in this table so it is the widest row and the first and third rows are smaller in width. I tried to put a style width = 70% on the middle row but that didn't do anything. I need assistance on how to do this.

    The style sytax shown is invalid. 

        <table id="itemsTable" class="table  table-bordered display responsive nowrap" style="width: 100%">
            <tbody>
                @foreach (var Item in Model.ToView.DorItems ?? Enumerable.Empty<DorItem>())
                {
                    <tr><td colspan="3"></td></tr>
                    <tr style="background-color: #f9f9f9"><td colspan="3"><b>@item.Category.Name</b></td></tr>
                    <tr>
                        <td style="width:15%;">@Html.Raw(item.Responsibility)</td>
                        <td  style="width:70%;" style="text-align: left">
                            @Html.Raw(item.Description)
                            <div class="verticalspace"></div>
                            @foreach (var response in Model.Responses)
                            {
                                <div style="border: solid black 1px; background-color:#eeeeee">
    
                                    <b>@Html.Raw(response.DateCreated.ToString("MM/dd/yyyy")) @Html.Raw(response.Title)</b>
                                    <div class="verticalspace"></div>
                                    @Html.Raw(response.Response)
                                </div>
                            }
                        </td>
                        <td style="width:15%;"><b>@item.Status.Name</b></tdstyle="width:15%;">
                    </tr>
                }
            </tbody>
        </table>

    Simplified HTML

        <table id="itemsTable" class="table  table-bordered display responsive nowrap" style="width: 100%">
            <tbody>
                <tr>
                    <td colspan="3">Header</td>
                </tr>
                <tr>
                    <td style="width:15%;"></td>
                    <td style="width:70%;"></td>
                    <td style="width:15%;"></td>
                </tr>
            </tbody>
        </table>

    Thursday, October 31, 2019 1:28 PM
  • User-501297529 posted

    The last column did shrink in width but the first one didn't for some reason. Removed HtmlRaw and that still didn't help it.

    Thursday, October 31, 2019 1:52 PM
  • User475983607 posted

    The last column did shrink in width but the first one didn't for some reason. Removed HtmlRaw and that still didn't help it.

    I cannot see the contents of the columns.  I assume the first column contains content that is expends the first cell.  You'll need to come up with a design to handle this situation.  If the cell contains text, then try adding...

     word-wrap:break-word

    ...to the style attribute.

    Thursday, October 31, 2019 1:57 PM
  • User-501297529 posted

    This is what a row of what it looks like with data

    CEO (Bob Parker) and Board of Directors December 31, 2019 5) Charge off the two insurance premium participation loans per your policy. These loans will be delinquent more than 6 months with no payments, which meets your charge off guidelines @ 9-30-2010 – management indicates that the originating credit union is close to bundling these insurance premium loans. Completed

    This is what I want it to look like

    CEO (Bob Parker) and Board of Directors December 31, 2019 5) Charge off the two insurance premium participation loans per your policy. These loans will be delinquent more than 6 months with no payments, which meets your charge off guidelines @ 9-30-2019 – management indicates that the originating credit union is close to bundling these insurance premium loans. Completed

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, October 31, 2019 6:39 PM
  • User475983607 posted

    I cannot reproduce this issue and can set the column widths as shown above.   You must have CSS bugs that you need to fix.  Use the browser's dev tools to view the styles applied to the table cells.  Otherwise, share markup that reproduces this issue.   

    Thursday, October 31, 2019 6:46 PM