DataTables - 响应式子行无法正常显示

Question

我有一个带编辑和删除按钮的数据表。如果您已调整表格大小并显示展开/折叠图标，则此表格的列不会正确显示。

未扩展的表：

表格显示不正确：

表格html：

(function(){
    var oldValue = yourObject[targetProperty];
    var currentValue = oldValue;
    var getter = function() {
        return currentValue; // or do something before returning, like applying parseInt or whatever
    };
    var setter = function(newValue) {
        currentValue = newValue; // or add some customization as well
    };
    Object.defineProperty(yourObject,targetProperty,{
        get: getter,
        set: setter,
        enumerable: true, // depending on your needs
        configurable: true // depending on your needs
    });
})();

jQuery的/使用Javascript：

 <table id="documentsTable" class="table table-bordered display hover no-wrap dataTables" style="width: 100%">
            <thead>
                <tr>
                    <th>Document Type</th>
                    <th>Description</th>
                    <th>Hide Description</th>
                    <th>Hide Creation Date</th>
                    <th>Creation Date</th>
                    <th>Hide Document Saved</th>
                    <th>Document Saved</th>
                    <th>Analyst Name</th>
                    <th>Hide Doc ID</th>
                            <th style="text-align:center">Edit</th>
                            <th style="text-align:center">Delete</th>

                </tr>
            </thead>
            <tbody>
                        <tr>
                            <td>Miscellaneous Update</td>
                            <td>
                                <a href="/Documents/Render?documentID=43141">Ryanair: an update to current year guidance - $72</a>
                            </td>
                            <td>Ryanair: an update to current year guidance - $72</td>
                            <td>2016/06/18</td>
                            <td>06/18/2016</td>
                            <td>2018/01/19</td>
                            <td>01/19/2018</td>
                            <td>Aaron Wasserman</td>
                            <td>43141</td>
                                    <td style="text-align:center">
                                                <button type="button" class="btnEditDocument btn btn-info btn-xs delete-btn icon-fixed-width" data-toggle="modal">
                                                    <span class="glyphicon glyphicon-pencil"></span>
                                                </button>

                                    </td>
                                    <td style="text-align:center">
                                                <button type="button" class="btnDeleteDocument btn btn-info btn-xs delete-btn icon-fixed-width"
                                                        data-toggle="modal" data-target="#deleteDocumentModal" data-documentID="43141">
                                                    <span class="glyphicon glyphicon-trash"></span>
                                                </button>

                                    </td>

                        </tr>

有关为何发生这种情况的任何想法？我的应用程序中有其他类似的表，但都正常工作。