Bootstrap 表的 IE11 Flex 问题

Posted

技术标签:

【中文标题】Bootstrap 表的 IE11 Flex 问题【英文标题】:IE11 Flex issue with Bootstrap table 【发布时间】:2019-06-23 00:47:29 【问题描述】:

我在使用引导表时遇到了 IE11 和 Flexbox 的问题。

我的行是这样的

我在设计中有一个可向右滚动的表格,因为其中有很多字段。带有 col 设置的 flex 使其保持列宽。

这在 Chrome 和 Firefox 中运行良好,如下图所示。

但在 IE 中,由于 tbody 行相对于 ad 行的移动方式不同,因此它被破坏了。它们都具有与第一张图像相同的结构和类。

知道如何解决这个问题吗?我必须在当前项目中支持 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>

【问题讨论】:

IE11 不完全支持 Flexbox:caniuse.com/#search=flexbox,“部分支持是由于存在大量错误(请参阅已知问题)” 我知道这一点。有什么解决办法吗? 尝试将flex-shrink: 0 添加到弹性项目中。 @Michael_B 没有帮助:( 可以把表格的完整代码放在这里吗? 【参考方案1】:

我是用这种风格想出来的:

    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>

【讨论】:

非常感谢。它使用一列,多列 tbody 和 thead 需要具有 flex-wrap: wrap;属性:) @MichalTakáč 不错! :)

以上是关于Bootstrap 表的 IE11 Flex 问题的主要内容,如果未能解决你的问题,请参考以下文章

Flex-direction 列使 flex 项目重叠 IE11

IE 11 中 flex unset 和 flex none 之间的区别

IE11中的Flex项目溢出容器

在 IE11 中与显示重叠的行:flex

flex-grow 在 Internet Explorer 11 (IE11) 中无法正确呈现

IE11中的Flex项目溢出[重复]