Question

我一直在努力争取数据表根据宽度百分比调整大小几个小时。尽管表包含在另一个基于％宽度的div中，但表行总是超过其容器的大小。我希望长行溢出到下一行而不是扩展它们的宽度。

我的嵌入式javascript html：

<html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="//code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
    <script src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>
    <style src="//cdn.datatables.net/1.10.5/css/jquery.dataTables.css"></style>
    <script type='text/javascript'>
    $(document).ready(function() {
        table = $('#vol_table').dataTable({
        "sWidth" : "100%",
        "aoColumns" : [
            { sWidth: '20%' },
            { sWidth: '80%' }
        ]
        });

        $('#vol_table tbody').on( 'click', 'tr', function () {
            if ( $(this).hasClass('selected') ) {
                $(this).removeClass('selected');
            }
            else {
                table.$('tr.selected').removeClass('selected');
                $(this).addClass('selected');
            }
        } );

    } );
    </script>

    <style>
        #xouter3{
        width:80%;
        border:1px solid #000;
        float:left;
        margin:15px 0 15px 9%;
        }

        #xleftcol3{
        float: left;
        width: 15%;
        background:#eff2df;
        }

        #xmiddlecol3 {
        overflow:hidden;
        }
        * html #xmiddlecol3{float:left;}
        * html #xmiddlecol3 #xinner3{width:100%;}

        #col2text {
            white-space:pre-wrap;
            height:500px;
            overflow:scroll;
            font-size:0.8em;
        }

        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
        }

        #xrightcol3 {
        float:right;
        width: 15%;
        position:relative;
        }

        .selected td {
            background-color: aqua !important; /* Add !important to make sure override datables base styles */
         }

    </style>
</head>
    <body>
        <h1 id="title">DataTables Problem</h1>
        <div id="xouter3">
            <div id="xleftcol3">
                <div id="col1text">
                    This is the column 1 text
                </div>
            </div>
            <div id="xrightcol3">
                <table id="vol_table" style="width:100%">
                    <thead>
                        <tr>
                            <th>Vol</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td><td>This is an awfully long row isn't it</td>
                        </tr> 
                        <tr>
                            <td>2</td><td>AnotherLongRowWithoutWhiteSpaces</td>
                        </tr>                                               
                    </tbody>
                </table>
            </div>
            <div id="xmiddlecol3">
                <div id="xinner3">
                    <div id="col2text">
                        This is the column 2 text
                     </div>
                </div>
            </div>
        </div>

    </body>
</html>

Answer 1

你可以像下面这样做

"columnDefs": [
    {
        targets: 2,
        className: 'dt-body-left',
        width: '200px'
    }

DataTables列宽度不调整大小

1 个答案: