Question

我有数据表，而我在移动设备中看到一些列被隐藏。如何使其可滚动，以便我也可以在移动设备中查看。我的datatable.i中缺少响应能力，还添加了引导参考

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

 <script>
  $(function () {
    $("#example1").DataTable();
    $('#example2').DataTable({
      "paging": true,
      "lengthChange": false,
      "searching": false,
      "ordering": true,
      "info": true,
      "autoWidth": false
    });
  });
    </script>


                    <table id="example1" class="table table-bordered table-striped table-hover">
                        <thead>
                            <tr>
                                <th>Sl No</th>
                                <th>Time</th>
                                <th>Oil Temperature</th>
                                <th>Winding Temperature</th>
                                <th>Ambient Temperature</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach (var item in Model.Select((value, i) => new { i, value }))
                            {
                                <tr>
                                    <td>@item.i</td>
                                    <td>@item.value.UpdatedTime</td>
                                    <td>@item.value.Oil_temp</td>
                                    <td>@item.value.winding_temp</td>
                                    <td>@item.value.Ambient_temp</td>
                                </tr>
                            }
                        </tbody>
                        <tfoot>
                            <tr>
                                <th>Sl No</th>
                                <th>Time</th>
                                <th>Oil Temperature</th>
                                <th>Winding Temperature</th>
                                <th>Ambient Temperature</th>
                            </tr>
                        </tfoot>
                    </table>

Answer 1

<style>
#table-scroll {
width:100%;
height:200;
overflow:auto;  
margin-top:0px;
margin-left:0px;
}
</style>

<div id="table-scroll">
<table>

请告知是否有用..谢谢..

如何在数据表中添加滚动条

1 个答案: