如何解决DataTables-表格在容器外部扩展，如何包含？
我一直在尝试通过将实现DataTables添加到所有表来为Web应用程序增添趣味。在大多数表上都可以使用它（令人惊讶的是，由于我在JS和CSS方面的专业知识不足），但是对于其中一些表中包含大量文本的表，该表向右延伸得太远了，从而使其看起来没有居中。这就是我的意思：
最好，搜索栏在外观上与表格右对齐，但是当我检查页面时，从技术上讲，它与表格右对齐。我认为Annotation表必须以某种方式包含在其中，但是我不确定是不是这样，还是有其他问题。
进入实际代码，我正在将此Web应用程序使用Razor Pages以及Bootstrap 3.4.0和DataTables 1.10.22。这就是我所拥有的：
@page "{assessmentId}"
@model CustomerPageTest.Pages.View.EditClassificationTiersModel
@{
ViewData["Title"] = "EditClassificationTiers";
}
@section Scripts
{
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
$('#myTable').dataTable({
"paging": false,columnDefs: [{
targets: -1,className: 'dt-head-center'
}]
});
});
</script>
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
<h1 align="center" style="color:yellowgreen">Edit Classifications / Tiers</h1>
<br />
<form method="post">
<div class="container">
<table class="table" style="border: hidden !important; border-bottom: hidden !important; white-space: nowrap; width: 100%">
<tr>
<td>
<h3 class="text-light" style="white-space: nowrap">Data Classification:</h3>
<div class="form-group justify-content-center">
<select class="form-control" asp-for="returnedClassification" asp-items="Model.ClassificationList"></select>
</div>
</td>
<td>
<h3 class="text-light" style="white-space: nowrap">Tier:</h3>
<div class="form-group justify-content-center">
<select class="form-control" asp-for="returnedTier" asp-items="Model.TierList"></select>
</div>
</td>
<td>
<br /><br /><br />
<div class="inner-addon left-addon">
<i class="glyphicon glyphicon-plus text-light col-md-offset-6"></i>
<input type="submit" value="Add Classification / Tier" class="btn btn-dark text-light col-md-offset-6" />
</div>
</td>
<td>
<br /><br /><br />
<div class="inline-right justify-content-center">
<a class="btn btn-dark" asp-page="/View/EditAssessment" asp-route-assessmentId="@Model.assessmentID">
<i class="glyphicon glyphicon-arrow-left"></i> Back
</a>
</div>
</td>
</tr>
</table>
</div>
<input type="hidden" asp-for="@Model.assessmentID" name="assessmentID" />
<table id="myTable" class="display cell-border stripe" role="grid" style="background-color: #dbdbdb; text-align:center; width: 100%">
<thead>
<tr class="text-dark">
<th style="text-align: center"></th>
<th style="text-align: center"><strong>Name</strong></th>
<th style="text-align: center"><strong>Datacenter</strong></th>
<th style="text-align: center"><strong>Cluster</strong></th>
<th style="text-align: center"><strong>Host</strong></th>
<th style="text-align: center"><strong>Classification</strong></th>
<th style="text-align: center"><strong>Tier</strong></th>
<th style="text-align: center"><strong>Annotation</strong></th>
</tr>
</thead>
<tbody style="background-color: #dbdbdb;">
@for (int i = 0; i < Model.vInfoViews.Count(); i++)
{
<tr class="text-dark">
<td style="padding-top: 15px">
<input type="checkbox" asp-for="@Model.vInfoViews.ElementAt(i).isChecked" name="vInfoViews[@i].isChecked" />
<input type="hidden" asp-for="@Model.vInfoViews.ElementAt(i).vHostID" name="vInfoViews[@i].vHostID" />
<input type="hidden" asp-for="@Model.vInfoViews.ElementAt(i).assessmentID" name="vInfoViews[@i].assessmentID" />
<input type="hidden" asp-for="@Model.vInfoViews.ElementAt(i).vmID" name="vInfoViews[@i].vmID" />
</td>
<td style="padding-top: 15px">
@Model.vInfoViews.ElementAt(i).Name
<input type="hidden" asp-for="@Model.vInfoViews.ElementAt(i).Name" name="vInfoViews[@i].Name" />
</td>
<td style="padding-top: 15px">
@Model.vInfoViews.ElementAt(i).Datacenter
<input type="hidden" asp-for="@Model.vInfoViews.ElementAt(i).Datacenter" name="vInfoViews[@i].Datacenter" />
</td>
<td style="padding-top: 15px">
@Model.vInfoViews.ElementAt(i).Cluster
<input type="hidden" asp-for="@Model.vInfoViews.ElementAt(i).Cluster" name="vInfoViews[@i].Cluster" />
</td>
<td style="padding-top: 15px">
@Model.vInfoViews.ElementAt(i).hostName
<input type="hidden" asp-for="@Model.vInfoViews.ElementAt(i).hostName" name="vInfoViews[@i].hostName" />
</td>
<td style="padding-top: 15px">
@Model.vInfoViews.ElementAt(i).printClassification
<input type="hidden" asp-for="@Model.vInfoViews.ElementAt(i).classificationID" name="vInfoViews[@i].classificationID" />
</td>
<td style="padding-top: 15px">
@Model.vInfoViews.ElementAt(i).Tier
<input type="hidden" asp-for="@Model.vInfoViews.ElementAt(i).Tier" name="vInfoViews[@i].Tier" />
</td>
<td style="padding-top: 15px">
@Model.vInfoViews.ElementAt(i).Annotation
<input type="hidden" asp-for="@Model.vInfoViews.ElementAt(i).Annotation" name="vInfoViews[@i].Annotation" />
</td>
</tr>
}
</tbody>
</table>
</form>
我定义的第二个表是实现DataTables的表。我有什么想法可以更好地解决这个问题？
哦，我也觉得在此处添加检查屏幕截图会很有帮助
只是不包含容器！
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
