响应式表格行，使用 inline-block 跨浏览器支持

Question

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

和往常一样，问题是跨浏览器支持之一：

• 在 Firefox 中完美运行
• 如果我保持单元格左对齐，表格在 IE 中也可以工作。
• 在 Chrome 和 Safari 中根本无法使用。

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

我知道最好使用 div 网格（如 Skeleton），但我们有一堆遗留的表格源代码，主要用于布置旧式网格（与表格数据相反）。

我们正在考虑应用这个类以使其至少能够优雅地折叠，直到我们有时间替换所有 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

去掉float left form .rTable td, .rTable 就可以了