IE11 Flex проблема с таблицей начальной загрузки - PullRequest
Новая
       26

IE11 Flex проблема с таблицей начальной загрузки

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

У меня проблема с IE11 и Flexbox при использовании таблицы начальной загрузки.

Моя строка выглядит следующим образом

enter image description here

У меня естьтаблица в дизайне с возможностью прокрутки вправо, так как в ней много полей.Flex с настройкой col позволяет сохранить ширину столбца.

Это прекрасно работает в Chrome и Firefox, как показано на рисунке ниже.

enter image description here

В IE, однако, он сломан, так как строка tbody по-разному перемещается относительно строки thead.Они оба имеют ту же структуру и классы, что и на первом изображении.

enter image description here

Есть идеи, как решить эту проблему?Я должен поддержать IE11 с текущим проектом, и это настоящая боль.

ОБНОВЛЕНИЕ: Вот код таблицы: 

<table class="table-responsive table-sm">
        <thead>
        <tr class="d-flex">
            <th class="col-1">Bla 1</th>
            <th class="col-2">Bla 2</th>
            <th class="col-2">Bla 3</th>
            <th class="col-2">Bla 4</th>
            <th class="col-2">Bla 5</th>
            <th class="col-1">Bla 6</th>
            <th class="col-1">Bla 7</th>
            <th class="col-3">Bla 8</th>
            <th class="col-3">Bla 9</th>
            <th class="col-1">Bla 10</th>
            <th class="col-3">Bla 11</th>
            <th class="col-3">Bla 12</th>
            <th class="col-3">Bla 13</th>
            <th class="col-3">Bla 14</th>
            <th class="col-2">15</th>
        </tr>
        </thead>
        <tbody>
        {% for item in bla %}
            <tr class="d-flex">
                <td class="col-1">{{ item.bla1 }}</td>
                <td class="col-2"></td>
                <td class="col-2">{{ item.bla3 }}</td>
                <td class="col-2">{{ item.bla4 }}</td>
                <td class="col-2">{{ item.bla5 }}</td>
                <td class="col-1">{{ item.bla6 }}</td>
                <td class="col-1">{{ item.bla7 }}</td>
                <td class="col-3">{{ item.bla8 }}</td>
                <td class="col-3">{{ item.bla9 }}</td>
                <td class="col-1">{{ item.bla10 }}</td>
                <td class="col-3">{{ item.bla11 }}</td>
                <td class="col-3">{{ item.bla12 }}</td>
                <td class="col-3">{{ item.bla13 }}</td>
                <td class="col-3">{{ item.bla14 }}</td>
                <td class="col-2">{{ item.bla15 }}</td>
            </tr>
        {% else %}
            <tr>
                <td colspan="14">no records found</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>

1 Ответ

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

Я понял, используя этот стиль: 

    td , th {
        display: block;
    }

    thead , tbody {
        display: flex;
    }

    tr {
        width: 100%;
    }

Решение 2 будет установить статическую ширину для каждого col, например: 

th.col-1 , td.col-1 {
    min-width: 100px;
    max-width: 100px;
}

th.col-2 , td.col-2 {
    min-width: 150px;
    max-width: 150px;
}

th.col-3 , td.col-3 {
    min-width: 200px;
    max-width: 200px;
}

Рабочий код с решением1: 

	td , th {
		display: block;
	}

	thead , tbody {
		display: flex;
	}

	tr {
		width: 100%;
	}
/*
	th.col-1 , td.col-1 {
		min-width: 100px;
		max-width: 100px;
	}

	th.col-2 , td.col-2 {
		min-width: 150px;
		max-width: 150px;
	}

	th.col-3 , td.col-3 {
		min-width: 200px;
		max-width: 200px;
	}
*/
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

	<style type="text/css">


  </style>
</head>
<body>

	<table class="table-responsive table-sm">
		<thead>
			<tr class="d-flex">
				<th class="col-1">Bla 1</th>
				<th class="col-2">Bla 2</th>
				<th class="col-2">Bla 3</th>
				<th class="col-2">Bla 4</th>
				<th class="col-2">Bla 5</th>
				<th class="col-1">Bla 6</th>
				<th class="col-1">Bla 7</th>
				<th class="col-3">Bla 8</th>
				<th class="col-3">Bla 9</th>
				<th class="col-1">Bla 10</th>
				<th class="col-3">Bla 11</th>
				<th class="col-3">Bla 12</th>
				<th class="col-3">Bla 13</th>
				<th class="col-3">Bla 14</th>
				<th class="col-2">Bla 15</th>
			</tr>
		</thead>
		<tbody>
			<tr class="d-flex">
				<td class="col-1">Bla 1</td>
				<td class="col-2">Bla 2</td>
				<td class="col-2">Bla 3</td>
				<td class="col-2">Bla 4</td>
				<td class="col-2">Bla 5</td>
				<td class="col-1">Bla 6</td>
				<td class="col-1">Bla 7</td>
				<td class="col-3">Bla 8</td>
				<td class="col-3">Bla 9</td>
				<td class="col-1">Bla 10</td>
				<td class="col-3">Bla 11</td>
				<td class="col-3">Bla 12</td>
				<td class="col-3">Bla 13</td>
				<td class="col-3">Bla 14</td>
				<td class="col-2">Bla 15</td>
			</tr>
		</tbody>
	</table>

	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
...