Question

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

以下是我的代码：

＆＃13;

WorksheetFunction.IfError([expression], WorksheetFunction.NetworkDays([date from], [date to], [holidays]))

＆＃13;

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

＆＃13;

.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;
            }

＆＃13;

Answer 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>

Answer 2

如果您只想在宽屏幕上展示您的桌子，例如去除或平板电脑。就这样做：

.EventLogGrid td {max-width: 5px}

如果您希望自己的表格具有响应能力，则应尝试these way

在弹出窗口中放入HTML5表并删除水平滚动条

2 个答案: