我试图制作一个具有滚动条和固定页眉/页脚的灵活网格,但不使用JavaScript,但在IE上flex项目似乎无法正常工作。
这是fiddle链接: https://jsfiddle.net/m6oqw76e/5/ 基本上我所做的是将所有内容设置为100%宽度,并使用以下结构:
这是fiddle链接: https://jsfiddle.net/m6oqw76e/5/ 基本上我所做的是将所有内容设置为100%宽度,并使用以下结构:
.mGrid > thead > tr.hdr,
.mGrid > tbody > tr.nrm,
.mGrid > tbody > tr.alt {
display: flex;
}
.mGrid > thead > tr.hdr > th,
.mGrid > tbody > tr.nrm > td,
.mGrid > tbody > tr.alt > td {
min-width: 0;
word-wrap: break-word;
/*flex-grow: 100;
flex-shrink: 0;
flex-basis: 0px;*/
flex: 100 0 0px;
}
我知道IE因为flex的许多bug而闻名,但我想知道是否有任何解决方法使其正常工作。
.mGrid { border-collapse: collapse; background-color: gainsboro; }
.mGrid > thead > tr.hdr > th, .mGrid > tbody > tr.nrm > td, .mGrid > tbody > tr.alt > td { border: 1px solid white; }
/*======================================================================= basic table structure */
.mGrid {
width: 100%;
}
.mGrid > thead,
.mGrid > tbody,
.mGrid > tfoot {
display: block;
width: 100%;
}
.mGrid > tbody {
height: 100px;
overflow-y: scroll;
}
.mGrid > thead > tr.hdr {
width: calc(100% - 17px);
}
.mGrid > tbody > tr.nrm,
.mGrid > tbody > tr.alt {
width: 100%;
}
/*======================================================================= flex not working */
.mGrid > thead > tr.hdr,
.mGrid > tbody > tr.nrm,
.mGrid > tbody > tr.alt {
display: flex;
}
.mGrid > thead > tr.hdr > th,
.mGrid > tbody > tr.nrm > td,
.mGrid > tbody > tr.alt > td {
min-width: 0;
word-wrap: break-word;
/*flex-grow: 100;
flex-shrink: 0;
flex-basis: 0px;*/
flex: 100 0 0px;
}
<table class="mGrid">
<thead>
<tr class="hdr">
<th><a href="http://google.com">Nº Despesa</a></th>
<th><a href="http://google.com">Consultor</a></th>
<th><a href="http://google.com">Setor</a></th>
<th><a href="http://google.com">Empresa</a></th>
<th><a href="http://google.com">Motivo</a></th>
<th><a href="http://google.com">Data</a></th>
<th><a href="http://google.com">Hotel</a></th>
<th><a href="http://google.com">Refeição</a></th>
<th><a href="http://google.com">Veículo</a></th>
<th><a href="http://google.com">Taxi</a></th>
<th><a href="http://google.com">Outros</a></th>
<th>Vlr Total</th>
<th>Comprovantes OK</th>
<th>Aprovado</th>
<th>Status Visita</th>
</tr>
</thead>
<tbody>
<tr class="nrm">
<td><span>00392-05-01</span></td>
<td><span>Names na</span></td>
<td><span>Plantão 24x7</span></td>
<td><span>Empres</span></td>
<td><span>Serviço</span></td>
<td><span>06-03-2017</span></td>
<td><span>Não</span></td>
<td><span>R$ 80,00</span></td>
<td><span>R$ 0,00</span></td>
<td><span>R$ 150,00</span></td>
<td><span>R$ 0,00</span></td>
<td><span>R$ 230,00</span></td>
<td><span>Sim</span></td>
<td><span>Sim</span></td>
<td><span>Liquidado</span></td>
</tr>
<tr class="alt">
<td><span>00392-03-01</span></td>
<td><span>Names Names Names</span></td>
<td><span>Plantão 24x7</span></td>
<td><span>EMPR</span></td>
<td><span>Serviço</span></td>
<td><span>31-01-2017</span></td>
<td><span>Não</span></td>
<td><span>R$ 80,00</span></td>
<td><span>R$ 0,00</span></td>
<td><span>R$ 100,00</span></td>
<td><span>R$ 0,00</span></td>
<td><span>R$ 180,00</span></td>
<td><span>Sim</span></td>
<td><span>Sim</span></td>
<td><span>Liquidado</span></td>
</tr>
<tr class="nrm">
<td><span>00392-02-01</span></td>
<td><span>Names na Names Namesnam</span></td>
<td><span>Plantão 24x7</span></td>
<td><span>Empres</span></td>
<td><span>Serviço</span></td>
<td><span>31-01-2017</span></td>
<td><span>Sim</span></td>
<td><span>R$ 80,00</span></td>
<td><span>R$ 0,00</span></td>
<td><span>R$ 100,00</span></td>
<td><span>R$ 0,00</span></td>
<td><span>R$ 180,00</span></td>
<td><span>Sim</span></td>
<td><span>Sim</span></td>
<td><span>Liquidado</span></td>
</tr>
<tr class="alt">
<td><span>00392-01-02</span></td>
<td><span>Names na Names Namesnam</span></td>
<td><span>Plantão 24x7</span></td>
<td><span>EMPR</span></td>
<td><span>Relacionamentos</span></td>
<td><span>31-01-2017</span></td>
<td><span>Não</span></td>
<td><span>R$ 30,00</span></td>
<td><span>R$ 0,00</span></td>
<td><span>R$ 100,00</span></td>
<td><span>R$ 0,00</span></td>
<td><span>R$ 130,00</span></td>
<td><span>Sim</span></td>
<td><span>Sim</span></td>
<td><span>Liquidado</span></td>
</tr>
<tr class="nrm">
<td><span>00392-01-01</span></td>
<td><span>Names na Names</span></td>
<td><span>Plantão 24x7</span></td>
<td><span>EMPR</span></td>
<td><span>Relacionamentos</span></td>
<td><span>30-01-2017</span></td>
<td><span>Sim</span></td>
<td><span>R$ 80,00</span></td>
<td><span>R$ 0,00</span></td>
<td><span>R$ 100,00</span></td>
<td><span>R$ 0,00</span></td>
<td><span>R$ 180,00</span></td>
<td><span>Sim</span></td>
<td><span>Sim</span></td>
<td><span>Liquidado</span></td>
</tr>
<tr class="alt">
<td><span>00388-01-01</span></td>
<td><span>Names na Namesnam</span></td>
<td><span>Requisitos</span></td>
<td><span>Empres</span></td>
<td><span>Serviço</span></td>
<td><span>01-02-2017</span></td>
<td><span>Não</span></td>
<td><span>R$ 0,00</span></td>
<td><span>R$ 246,60</span></td>
<td><span>R$ 0,00</span></td>
<td><span>R$ 0,00</span></td>
<td><span>R$ 246,60</span></td>
<td><span>Sim</span></td>
<td><span>Sim</span></td>
<td><span>Liquidado</span></td>
</tr>
<tr class="nrm">
<td><span>00387-02-01</span></td>
<td><span>Names na Names Namesnam</span></td>
<td><span>Middleware</span></td>
<td><span>Empresa Empresaempr EMPR-ESA</span></td>
<td><span>Serviço</span></td>
<td><span>26-01-2017</span></td>
<td><span>Não</span></td>
<td><span>R$ 0,00</span></td>
<td><span>R$ 266,00</span></td>
<td><span>R$ 0,00</span></td>
<td><span>R$ 0,00</span></td>
<td><span>R$ 266,00</span></td>
<td><span>Sim</span></td>
<td><span>Sim</span></td>
<td><span>Liquidado</span></td>
</tr>
<tr class="alt">
<td><span>00387-01-01</span></td>
<td><span>Names na Names Namesnam</span></td>
<td><span>Middleware</span></td>
<td><span>Empres</span></td>
<td><span>Vendas</span></td>
<td><span>25-01-2017</span></td>
<td><span>Não</span></td>
<td><span>R$ 0,00</span></td>
<td><span>R$ 185,00</span></td>
<td><span>R$ 0,00</span></td>
<td><span>R$ 0,00</span></td>
<td><span>R$ 185,00</span></td>
<td><span>Sim</span></td>
<td><span>Sim</span></td>
<td><span>Liquidado</span></td>
</tr>
</tbody>
<tfoot>
<tr class="pgr">
<td colspan="16">
<table>
<tbody>
<tr>
<td><span>1</span></td>
<td><a href="http://google.com">2</a></td>
<td><a href="http://google.com">3</a></td>
<td><a href="http://google.com">4</a></td>
<td><a href="http://google.com">5</a></td>
<td><a href="http://google.com">6</a></td>
<td><a href="http://google.com">7</a></td>
<td><a href="http://google.com">8</a></td>
<td><a href="http://google.com">9</a></td>
<td><a href="http://google.com">10</a></td>
<td><a href="http://google.com">...</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tfoot>
</table>
width: 100%
,请尝试始终将width
设置为父元素的宽度。我喜欢这个问题,所以我会等待答案。 - Facundo La Rocca<table>
。 - Brett DeWoody