Question

我有项目在表中显示列表，因此我为此使用了数据表。我在更大的大屏幕上开发了它，但是当我在屏幕较小的笔记本电脑上打开它时，TH和TD的宽度不一样。但这是在笔记本电脑的屏幕上发生的，当我在更大的屏幕上打开它时，它看起来不错。

这是图片，

这是我的代码， user_list.php，

<!doctype html>
<html>
<head>
    <title>E-Arsip</title>
    <link rel="stylesheet" href="<?php echo base_url('assets/bootstrap/css/bootstrap.min.css') ?>"/>
    <link rel="stylesheet" href="<?php echo base_url('assets/datatables/dataTables.bootstrap.css') ?>"/>
    <link rel="stylesheet" href="<?php echo base_url('assets/datatables/dataTables.bootstrap.css') ?>"/>
    <link href="<?php echo base_url('assets/template/css/bootstrap.min.css') ?>" rel="stylesheet">
    <link href="<?php echo base_url('assets/template/css/styles.css');?>" rel="stylesheet">
    <link href="<?php echo base_url('assets/template/css/font-awesome.min.css'); ?>" rel="stylesheet">
    <!--<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/css/mycss.css')?>">-->
    <style>
    .dataTables_wrapper {
        min-height: 100px
    }

    .dataTables_processing {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        margin-left: -50%;
        margin-top: -25px;
        padding-top: 20px;
        text-align: center;
        font-size: 1.2em;
        color:grey;
    }
    /*body{
        padding: 15px;
    }*/
    .dt-head-center{
        text-align: center;
    }
    .table th{
        text-align: center;
        min-height: 300px;
    }
    .dataTables tbody th {
        min-height: 300px; /* or whatever height you need to make them all consistent */
    }
</style>
</head>
<body>
    <?php 
    $_user =& get_instance();
    $user['param1'] = "User Account";
    $user['params'] = "User Account";
    $user['jabatan'] = "admin";
    $this->load->view('template/navbar',$user) ;
    $this->load->view('template/sidebarMenu',$user) ;
    ?>
    <div class="col-sm-12">
    <div class="panel panel-primary ">

        <div class="panel-heading clearfix">
            <div class="panelTitle" style="float:left;"><small><span class="fa fa-address-card-o" style="font-size:1.5em;"></span></small>&nbsp;&nbsp;Akun User</div>
        </div>
        <div class="panel-body">
            <div class="row" style="margin-bottom: 10px">
                <div class="col-sm-4">
                </div>
                <!-- <div class="col-md-4 text-center">
                    <div style="margin-top: 4px"  id="message">
                        <?php echo $this->session->userdata('message') <> '' ? $this->session->userdata('message') : ''; ?>
                    </div>
                </div> -->
            </div>
            <div class="col-sm-12">
                <a href="<?php echo site_url('admin/create_user')?>" data-toggle="tooltip" title="Baca Arsip">
                            <button class="btn btn-primary " ><i class="glyphicon glyphicon-plus"></i>&nbspTambah User</button>    
                </a>
                <br><br>
                <table class="table table-bordered table-striped" id="mytable">
                    <thead>
                        <tr>
                            <th width="40px" style="height: 20px;"><span style="width: inherit; display: block;">No</th>
                            <th style="height: 20px;"><span style="width: inherit; display: block;">Level</th>
                            <th style="height: 20px;"><span style="width: inherit; display: block;">Username</th>
                            <th width="90px" style="height: 20px;"><span style="width: inherit; display: block;">Action</th>
                        </tr>
                    </thead>

                </table>
            </div>
        </div>
    </div>
</div>

<script src="<?php echo base_url('assets/js/jquery-1.11.2.min.js') ?>"></script>
<script src="<?php echo base_url('assets/datatables/jquery.dataTables.js') ?>"></script>
<script src="<?php echo base_url('assets/datatables/dataTables.bootstrap.js') ?>"></script>
<script src="<?php echo base_url('assets/template/js/custom.js') ?>"></script>
<script src="<?php echo base_url('assets/template/js/bootstrap.min.js') ?>"></script>
<script type="text/javascript">
$(document).ready(function() {
    $.fn.dataTableExt.oApi.fnPagingInfo = function(oSettings)
    {
        return {
            "iStart": oSettings._iDisplayStart,
            "iEnd": oSettings.fnDisplayEnd(),
            "iLength": oSettings._iDisplayLength,
            "iTotal": oSettings.fnRecordsTotal(),
            "iFilteredTotal": oSettings.fnRecordsDisplay(),
            "iPage": Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength),
            "iTotalPages": Math.ceil(oSettings.fnRecordsDisplay() / oSettings._iDisplayLength)
        };
    };

    var t = $("#mytable").dataTable({
        scrollX:        true,
            scrollCollapse: true,
        initComplete: function() {
            var api = this.api();
            $('#mytable_filter input')
            .off('.DT')
            .on('keyup.DT', function(e) {
                if (e.keyCode == 13) {
                    api.search(this.value).draw();
                }
            });
        },
        oLanguage: {
            sProcessing: "loading..."
        },
        processing: true,
        serverSide: true,
        ajax: {"url": "json", "type": "POST"},
        columns: [
        {
            "data": "id_user",
            "orderable": false
        },{"data": "level"},{"data": "username"},
        {
            "data" : "action",
            "orderable": false,
            "className" : "text-center"
        }
        ],
        order: [[0, 'desc']],
        rowCallback: function(row, data, iDisplayIndex) {
            var info = this.fnPagingInfo();
            var page = info.iPage;
            var length = info.iLength;
            var index = page * length + (iDisplayIndex + 1);
            $('td:eq(0)', row).html(index);
        }
    });
});
$(document).ready(function () {             
  $('.dataTables_filter input[type="search"]').
  attr('placeholder','Cari').
  css({'height':'35px','display':'inline-block'});
});
</script>
</body>
</html>

我尝试编辑宽度，但没有任何反应，我的代码有什么问题？任何帮助将不胜感激！

Answer 1

将此添加到表中

table{
  table-layout: fixed; 
  word-wrap:break-word; 
}

如何固定数据表中TH和TD的宽度？

1 个答案: