在gridview上应用jquery数据表和bootstrap后，为什么它的列相距很远？

Question

我在 gridivew 上使用了 bootstrap 和 jquery 数据表。它可以工作，但是列非常大并且彼此分开，看起来不太好。我想让它小一点，彼此靠近一点，但做不到。

网格视图代码：

<div class="table-responsive table-sm DIV">
  <asp:GridView ID="dgvEmployees" runat="server" CssClass="table table-borderless table-striped">
     <Columns>
       <asp:CommandField ButtonType="Image" SelectImageUrl="~/assets/img/icons/view.png" ShowSelectButton="true" SelectText="View" />
       <asp:CommandField ButtonType="Image" ShowEditButton="true" EditImageUrl="~/assets/img/icons/pencil.png" />
       <asp:CommandField ButtonType="Image" DeleteImageUrl="~/assets/img/icons/trashbin.png" ShowDeleteButton="true" />
     </Columns>
 </asp:GridView>
</div>

代码

  Protected Sub dgvEmployees_RowCommand(sender As Object, e As GridViewCommandEventArgs) Handles dgvEmployees.RowCommand
        If e.CommandName = "Select" Then
            Dim RowIndex As Int16 = Convert.ToInt16(e.CommandArgument)
            Dim EmpID As String = dgvEmployees.Rows(RowIndex).Cells(3).Text
            Response.Redirect(String.Format("EmployeeDetails.aspx?EId={0}&Action={1}", Server.UrlEncode(EmpID), Server.UrlEncode("View")))
        ElseIf e.CommandName = "Edit" Then
            Dim RowIndex As Int16 = Convert.ToInt16(e.CommandArgument)
            Dim EmpID As String = dgvEmployees.Rows(RowIndex).Cells(3).Text
            Response.Redirect(String.Format("EmployeeDetails.aspx?EId={0}&Action={1}", Server.UrlEncode(EmpID), Server.UrlEncode("Edit")))
        ElseIf e.CommandName = "Delete" Then
            'Dim RowIndex As Int16 = Convert.ToInt16(e.CommandArgument)
            'Dim EmpID As String = dgvEmployees.Rows(RowIndex).Cells(3).Text
            'Dim EmployeeBLL = New EmployeeBLL()
            'EmployeeBLL.DeleteEmployeeID(Convert.ToInt16(EmpID))
            'GetAllEmployees()
        End If
    End Sub

脚本：

   <script src="assets/js/core/jquery.3.2.1.min.js"></script>
    <script src="assets/js/plugin/datatables/datatables.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {


                  $('#ContentPlaceHolder1_dgvEmployees').prepend($("<thead></thead>").append($(this).find("tr:first"))).DataTable({
                      "responsive": true,
                      "sPaginationType": "full_numbers"
                  });

        $('#ContentPlaceHolder1_dgvEmployees').DataTable();
    });

Answer 1

对于vb.net

使用 DataGridView1.AutoSizeColumnsMode 查看可用选项并选择适合您的选项，希望对您有所帮助

那里有一个选项可以自动增加列以适应数据

对于asp.net

将其他列的 ItemStyle 宽度设置为固定宽度。并将 GridView 宽度设置为 100%

希望对您有所帮助

在gridview上应用jquery数据表和bootstrap后，为什么它的列相距很远？

After applying jquery datatable and bootstrap on gridview, why it columns are far apart?

html

vb.net

datatable

jquery

gridview