DataTables Bootstrap4 IE11 多行标题行跨度答案

【问题标题】：DataTables Bootstrap4 IE11 multiple row thead rowspanDataTables Bootstrap4 IE11 多行标题行跨度
【发布时间】：2019-01-28 15:28:15
【问题描述】：

我正在尝试修复 IE11 中的 :before :after 伪样式。标题在其他标准浏览器中看起来不错，但在 IE11 或 Edge 中则不然。 Bootstrap4 有一个默认的垂直对齐：底部，我试图将其应用于数据表图标图像，但这也不起作用。有趣的是，fixedHeader 是真的，当我向下滚动时，标题看起来还不错。

JavaScript：

$(document).ready(() =>{

    $('#results-table').DataTable({
        columnDefs: [
            {
                orderable: false, targets: [0, 1]
            }],
        fixedHeader: true,
        order: [[2, 'asc']],
        paging: false,
        searching: false,
        scrollCollapse: false,
        // autoWidth: true,
        // heightMatch: 'auto',
        info: false
    });
});

HTML：

  <table class="table" id="results-table" >
        <thead class="thead-light text-center">            
            <tr>
                <th rowspan="2">One</th>
                <th rowspan="2" class="">Two</th>
                <th rowspan="2">Three</th>                 
                <th rowspan="2">Four</th>
                <th rowspan="2">Five</th>
                <th colspan="3"> Columns under</th>    
            </tr>
            <tr>
                <th scope="col">1</th>
                <th scope="col">2</th>
                <th scope="col">3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
            <td>Data</td>
            <td>Data2</td>
            <td>Data3</td>
            <td>Data4</td>
            <td>Data5</td>
            <td>Data6</td>
            <td>Data7</td>
            <td>Data8</td>

        </tr>
    </tbody>
</table>

【问题讨论】：

标签： datatables bootstrap-4 internet-explorer-11 microsoft-edge

【解决方案1】：

我尝试使用下面的代码进行测试，在 IE 11、MS Edge 和 Chrome 中给出了类似的结果。

<!DOCTYPE html>
<html>
<head>
	<title>Page Title</title>
	<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script>
	$(document).ready(() =>{

    $('#results-table').DataTable({
        columnDefs: [
            {
                orderable: false, targets: [0, 1]
            }],
        fixedHeader: true,
        order: [[2, 'asc']],
        paging: false,
        searching: false,
        scrollCollapse: false,
        // autoWidth: true,
        // heightMatch: 'auto',
        info: false
    });
});
	</script>
</head>
<body>

 <table class="table" id="results-table" >
        <thead class="thead-light text-center">            
            <tr>
                <th rowspan="2">One</th>
                <th rowspan="2" class="">Two</th>
                <th rowspan="2">Three</th>                 
                <th rowspan="2">Four</th>
                <th rowspan="2">Five</th>
                <th colspan="3"> Columns under</th>    
            </tr>
            <tr>
                <th scope="col">1</th>
                <th scope="col">2</th>
                <th scope="col">3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
            <td>Data</td>
            <td>Data2</td>
            <td>Data3</td>
            <td>Data4</td>
            <td>Data5</td>
            <td>Data6</td>
            <td>Data7</td>
            <td>Data8</td>

        </tr>
    </tbody>
</table>

</body>
</html>

输出：

【讨论】：

感谢您提供详细信息。我应该提到我使用 Bootstrap4 并获取文件的下载版本。因此，样式包括箭头键，这就是问题所在。
我尝试在 IE 11 中使用下载的 Bootstrap4 版本进行测试，这也给了我类似的输出。 i.postimg.cc/fb6fyKMh/30.png 所以有可能是其他原因导致了这个问题。您可以让我知道您从哪里下载了 Bootstrap 文件。如果有任何不同，我也会尝试下载并尝试生成问题。