После применения jquery datatable и bootstrap к gridview, почему столбцы так далеки друг от друга?

Question

Я использовал данные начальной загрузки и jquery для gridivew.Это работает, но столбцы очень большие и отделены друг от друга, что выглядит не очень хорошо.Я хочу сделать его немного маленьким и близко друг к другу, но не смог.

Код Gridview:

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

Надеюсь, это поможет