Search code examples
htmlcssflexboxbootstrap-4internet-explorer-11

IE11 Flex issue with Bootstrap table

im experiencing a problem with IE11 and Flexbox when using bootstrap table.

My row looks like this

enter image description here

I have a table in the design that is scrollable to the right as there is a lot of fields in it. The flex with col setup make it to persist the column widths.

This works fine in Chrome and Firefox as seen on image bellow.

enter image description here

In IE though, its broken as the tbody row is moved differently against thead row. Both of them have the same structure and classes as on the first image.

enter image description here

Any idea how to resolve this? I have to support IE11 with current project and this is real pain.

UPDATE: Here is the code of the table:

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

  • I figured it out using this style:

        td , th {
        display: block;
    }

    thead , tbody {
        display: flex;
    }

    tr {
        width: 100%;
    }

    Solution 2 would be to set a static width to every col like this:

    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;
}

    Working code with solution 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>