在弹出窗口内调整 HTML5 表格并移除水平滚动条答案

【问题标题】：fit the HTML5 table within the pop up window and remove horizontal scroll bar在弹出窗口内调整 HTML5 表格并移除水平滚动条
【发布时间】：2017-09-14 01:05:52
【问题描述】：

我一直在尝试将表格的大小固定在弹出容器大小内，但即使在检查了这么多解决方案后也无法实现。也无法将文本包装在固定大小的单元格内。我看到一个长的水平滚动条。谁能帮忙。

下面是我的代码：

 $(document).ready(function () {
            $(".EventLogGrid").width($(window).width());
        });

.EventLogGrid {
                font-family: arial, sans-serif;
                /*border-collapse: collapse;*/
                width: 100%;
                border-color: #948E8C;
                border: thin;
              
            }
    
    
    
                .EventLogGrid td {
                    /*border: 1px solid #d7d7d7;*/
                    width: 5px;
                    border: 0.5px thin #d7d7d7;
                    text-align: left;
                    /*padding: 7px;*/
                    white-space: nowrap !important;
                    text-overflow: ellipsis !important;
                    overflow: hidden !important;
                }
    
                .EventLogGrid th {
                    width: 5px;
                    border: 0.5px thin #d7d5d5;
                    background-color: #EDEDEE;
                    font-weight: 100;
                    text-align: left;
                    /*padding: 7px;*/
                }
    
                .EventLogGrid tr:nth-child(odd) {
                    background-color: #EDEDEE;
                }
    
                .EventLogGrid tr:hover td {
                    
                }
    
            .EventLogGrid body {
                overflow-x: hidden;
            }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
    <body>
        <table class="EventLogGrid" style="padding: 0px; ">
            <tr>
                <th>
                    Event Type
                </th>
    
                <th>
                    Event Description
                </th>
                <th>
                    Revision
                </th>
    
                <th>
                    Version
                </th>
                <th>
                    Log By
                </th>
    
                <th>
                    Log Date
                </th>
                <th>
                    Organization Name
                </th>
                <th>
                    Document Owner Organization
                </th>
            </tr>
    
            @foreach (var item in Model.eventLogData)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.EventType)
                    </td>
    
    
                    <td>
                        @item.EventDescription
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Revision)
                    </td>
    
                    <td>
                        @Html.DisplayFor(modelItem => item.DocVersion)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.LogBy)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.LogDate)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.OrganizationName)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.DocumetOwnerOrganizationName)
                    </td>
                </tr>
            }
        </table>
      
    
    </body>
    </html>

【问题讨论】：

你知道bootstrap.js吗？如果你知道，那么你可以使用 bootstrap.js 来移除水平滚动。

标签： css html jqgrid html-table

【解决方案1】：

只需将三个链接添加到您的 head 标签，然后将“dataTable”类应用到您的表格即可移除水平滚动

<html>
<head>
<title></title>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
 <script type="text/javascript">
    $(document).ready(function () {
        //$(".EventLogGrid").width($(window).width());
    });
  </script>
  <style>
    .EventLogGrid {
        font-family: arial, sans-serif;
        /*border-collapse: collapse;*/
        width: 96%;
        border-color: #948E8C;
        border: thin;
      }



        .EventLogGrid td {
            /*border: 1px solid #d7d7d7;*/
            width: 3px !important;
            border: 0.5px thin #d7d7d7;
            text-align: left;
            /*padding: 7px;*/
            white-space: nowrap !important;
            text-overflow: ellipsis !important;
            overflow: hidden !important;
        }

        .EventLogGrid th {
            width: 3px !important;
            border: 0.5px thin #d7d5d5;
            background-color: #EDEDEE;
            font-weight: 100;
            text-align: left;
            /*padding: 7px;*/
        }

        .EventLogGrid tr:nth-child(odd) {
            background-color: #EDEDEE;
        }

        .EventLogGrid tr:hover td {
        }

        .EventLogGrid body {
            overflow-x: hidden;
        }
  </style>
 </head>
<body>
 <table class="EventLogGrid dataTable" style="padding: 0px;">
    <tr>
        <th>Event Type
        </th>

        <th>Event Description
        </th>
        <th>Revision
        </th>

        <th>Version
        </th>
        <th>Log By
        </th>

        <th>Log Date
        </th>
        <th>Organization Name
        </th>
        <th>Document Owner Organization
        </th>
    </tr>

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


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

            <td>@Html.DisplayFor(modelItem => item.DocVersion)
            </td>
            <td>@Html.DisplayFor(modelItem => item.LogBy)
            </td>
            <td>@Html.DisplayFor(modelItem => item.LogDate)
            </td>
            <td>@Html.DisplayFor(modelItem => item.OrganizationName)
            </td>
            <td>@Html.DisplayFor(modelItem =>   item.DocumetOwnerOrganizationName)
            </td>
        </tr>
    }
  </table>
</body>
</html>

【讨论】：

【解决方案2】：

如果您只想在桌面或平板电脑等宽屏幕中显示您的表格。只需这样做：

.EventLogGrid td {max-width: 5px}

如果你想让你的表响应，你应该试试these way

【讨论】：

您能否将您的代码发布在像 plunker 这样的实时编辑器中，以便我可以更轻松地帮助您？你用的是什么浏览器？
@Duannx 您的回答减少了几列的宽度，但即使内容较少，有些列的宽度仍保持不变。还是谢谢你
我实际上想使用显示理想输出的 jqgrid。但我想在循环中创建三个 jqgrids，每个选项卡在我的视图中具有不同的内容。但是这样做时只有第一个选项卡显示了网格。对于剩余的 2 个标签，没有创建任何内容
@user7721524：如果您有其他选择，请不要选择表。只需使用 div。多个 div 一起使用，你可以轻松地为它们做 css，就像一张桌子一样。