logo标签列表

为什么这个弹性表在Chrome上可以工作，但在IE 11上不能工作？

htmlcssflexboxinternet-explorer-11
3
我试图制作一个具有滚动条和固定页眉/页脚的灵活网格，但不使用JavaScript，但在IE上flex项目似乎无法正常工作。
这是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>

顺便提一下，IE在flex-blox方面存在一些bug。如果你想在子元素中设置width: 100％，请尝试始终将width设置为父元素的宽度。我喜欢这个问题，所以我会等待答案。 - Facundo La Rocca
有趣的是，即使在单元格上设置了固定宽度，换行似乎根本不起作用。 - Lucas
老实说，我认为解决方法是使用 <table>。 - Brett DeWoody
很遗憾，我的HTML更改非常有限，我正在使用ASP.NET GridView，并且它呈现如我代码片段所示。 - Lucas
可能是重复问题：https://dev59.com/E1wY5IYBdhLWcg3wwqL1 - Michael Benjamin
由于表格和弹性布局的冲突问题（请参见已接受的答案），此问题不会重复。 - Lucas
2个回答
2

更新这个css，你需要覆盖默认的th，td的显示属性，即display:table-cell，用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:1 1 110px; /* Updated*/
  display:flex; /* Added to override default display property*/
}


.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:1 1 110px;
  display:flex;
}
<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>

这个可以运行！现在我只需要找出为什么自动换行不起作用。这是另一个超出了这个问题范围的问题。 - Lucas
设置 span, a { width: 100% } 后，自动换行功能再次正常工作。 - Lucas
1

在IE浏览器中使用前缀 https://msdn.microsoft.com/zh-cn/library/hh673531(v=vs.85).aspx

display: -ms-flexbox;
-ms-flex-align: start;

etc..

.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;
  display: -ms-flexbox;
-ms-flex-align: start;
}
<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>

好的答案，它有效。我会编辑它并添加一个代码片段。 - Facundo La Rocca
抱歉，它开始为所有单元格提供相同的宽度，但仍然无法正常工作。 - Lucas
更具体地说，flex-grow 属性无法工作。 - Lucas
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接