Question

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

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

在Firefox中精彩地工作
如果我保持单元格左对齐，则表格可以在IE中使用。
在Chrome和Safari中都不起作用。

使用＆＃34; display：inline-block;＆＃34; 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

从.Table中移除浮动到.Table，然后就可以了

响应表行，跨内嵌块支持跨浏览器

1 个答案: