Question

我正在尝试修复IE11中的：before：after伪样式。在其他标准浏览器中，标题看起来还可以，但在IE11或Edge中则不然。 Bootstrap4有一个默认的vertical-align：bottom，我试图将其应用于数据表图标图像，但这也不起作用。有趣的一点是，fixedHeader是true，当我向下滚动标题时，看起来还可以。

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>

Answer 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>

输出：

DataTables Bootstrap4 IE11多行主题

1 个答案: