html - 响应式表格行，带内联 block 的跨浏览器支持

Question

我找到了许多关于如何修改表格以提高响应速度的示例，并将其中一些建议应用于我创建的文本页面。

像往常一样，问题是跨浏览器支持之一:

• 在 Firefox 中运行良好
• 如果我保持单元格左对齐，该表格在 IE 中工作。
• 在 Chrome 或 Safari 中根本不起作用。

在使用“display: inline-block;”时，Chrome 和 Safari 是否存在已知问题？在表格单元格 TD 上？它似乎忽略了那种风格。

我知道使用 div 网格(如骨架)更可取，但我们有一堆遗留表格源代码，主要用于布置旧式网格(与表格数据相反)。

我们正在考虑应用此类以允许它至少优雅地折叠，直到我们有时间替换所有 html。

你可以在这里看到演示: http://www.seanmurray.net/tabletest/

这是我当前演示的代码:

<style>
  /****************************/
  /* Responsive Table classes */
  /****************************/
  .rTable {
    display:         table;
    border-collapse: collapse;
  }
  .rTable td, .rTable th {
    display:   inline-block;
    overflow:  hidden;
    min-width: calc(100%/5);
    /* VARIABLE:  the #5 is based on how many columns you pick */
    float:     left;
  }
  .rTable, .rTable td, .rTable th, .rTable tr, .rTable tbody  {
    border:  none;
    padding: 0;
    margin:  0;
  }

  /*************************************************************************/
  /*  These styles are for display purposes only-NOT needed for responsive */
  /*************************************************************************/
  .rTable tr {
    background-color: #cccccc;
    border-bottom: 2px solid white;
  }
  .rTable td:nth-child(even) div, .rTable th:nth-child(even) div {
    background-color: #B0C4DE;
  }
  .rTable td:nth-child(odd) div, .rTable th:nth-child(odd) div {
    background-color: #778899;
  }
  .rTable td > div {
    border:  1px solid #999999;

    padding: 2px;

    margin:  2px;
  }
</style>

<hr />

<h2>Responsive table</h2>
This text precedes the table...
<table class="rTable rCenterTable">
  <tr>
    <td><div>Head Row1</div></td>
    <td><div>Head Row2</div></td>
    <td><div>Head Row3</div></td>
    <td><div>Head Row4</div></td>
    <td><div>Head Row5</div></td>
  </tr>
  <tr>
    <td><div>Col1 row1</div></td>
    <td><div>Col2 row1</div></td>
    <td><div>Col3 row1</div></td>
    <td><div>Col4-row1</div></td>
    <td><div>Col5-row1</div></td>
  </tr>
  <tr>
    <td><div>Column1-row2</div></td>
    <td><div>Column2-row2</div></td>
    <td><div>Column3-row2</div></td>
    <td><div>Column4-row2</div></td>
    <td><div>Column5-row2</div></td>
  </tr>
  <tr>
    <td><div>C1-r3</div></td>
    <td><div>C2-r3</div></td>
    <td><div>C3-r3</div></td>
    <td><div>C4-r3</div></td>
    <td><div>C5-r3</div></td>
  </tr>
  <tr>
    <td><div>Column1-row4</div></td>
    <td><div>Column2-row4</div></td>
    <td><div>Column3-row4</div></td>
    <td><div>Column4-row4</div></td>
    <td><div>Column5-row4</div></td>
  </tr>
  <tr>
    <td><div>This is Column1, Row5</div></td>
    <td><div>This is Column2, Row5</div></td>
    <td><div>This is Column3, Row5</div></td>
    <td><div>This is Column4, Row5</div></td>
    <td><div>This is Column5, Row5</div></td>
  </tr>
</table>
This text follows the table...

<hr />

Answer 1

把.Table的float left去掉，.Table,就可以了