我一直在尝试将表格的大小固定在弹出容器的大小范围内，但即使检查了这么多解决方案也无法实现。也无法将文本换行在固定大小的单元格内。我看到一个长的水平滚动条。谁能帮忙。
下面是我的代码:
$(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>最佳答案
只需将三个链接添加到您的 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>
关于css - 使 HTML5 表格适合弹出窗口并移除水平滚动条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43467989/