DataTables Bootstrap4 IE11 многострочный thead rowspan - PullRequest
Новая
       52

DataTables Bootstrap4 IE11 многострочный thead rowspan

0 голосов
/ 26 января 2019

Я пытаюсь исправить псевдо-стили: before: after в IE11.Заголовки выглядят нормально в других стандартных браузерах, но не в IE11 или Edge.Bootstrap4 имеет по умолчанию вертикальное выравнивание: основание, которое я пытаюсь применить к изображениям с иконками, но это тоже не работает.Интересно отметить, что 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>

IE Edge

1 Ответ

0 голосов
/ 28 января 2019

Я пытаюсь выполнить тест, используя приведенный ниже код, который дал мне похожий результат в 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>

Выход:

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...