Question

我有一个实现tableaw-stack模式的表。在Google Chrome，Mozilla Firefox，Internet Explorer，Edge上它可以正常工作，直到最近我发现Safari / iOS Safari上的台锯布局变形。我尝试使用最新版本的台锯和Safari，但布局仍然失真。

Codepen

<div class="container">
<table class="tablesaw" data-tablesaw-mode="stack">
            <thead>
                <tr>
                    <th>Movie Title</th>
                    <th>Rank</th>
                    <th>Year</th>
                    <th><abbr title="Rotten Tomato Rating">Rating</abbr></th>
                    <th>Gross</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="title"><a href="http://en.wikipedia.org/wiki/Avatar_(2009_film)">Avatar</a></td>
                    <td>1</td>
                    <td>2009</td>
                    <td>83%</td>
                    <td>$2.7B</td>
                </tr>
                <tr>
                    <td class="title"><a href="http://en.wikipedia.org/wiki/Titanic_(1997_film)">Titanic</a></td>
                    <td>2</td>
                    <td>1997</td>
                    <td>88%</td>
                    <td>$2.1B</td>
                </tr>
            </tbody>
        </table>
</div>

在Safari上的结果：

PS：我无法使用代码段。请单击Codepen链接。

更新：我发现布局适用于声明的<!DOCTYPE html>。但是，一旦声明，网页将不会加载CSS内容。我尝试过：

添加type =“ text / css”->不起作用
添加rel =“ stylesheet”->不起作用
在外部CSS文件中添加缺少的px /％->不起作用

Answer 1

<div class="container">
  <table class="tablesaw" data-tablesaw-mode="stack">
    <thead>
      <tr>
        <th>Movie Title</th>
        <th>Rank</th>
        <th>Year</th>
        <th><abbr title="Rotten Tomato Rating">Rating</abbr></th>
        <th>Gross</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="title"><a href="http://en.wikipedia.org/wiki/Avatar_(2009_film)">Avatar</a></td>
        <td>1</td>
        <td>2009</td>
        <td>83%</td>
        <td>$2.7B</td>
      </tr>
      <tr>
        <td class="title"><a href="http://en.wikipedia.org/wiki/Skyfall">Skyfall</a></td>
        <td>9</td>
        <td>2012</td>
        <td>92%</td>
        <td>$1.1B</td>
      </tr>
      <tr>
        <td class="title"><a href="http://en.wikipedia.org/wiki/Transformers:_Age_of_Extinction">Transformers: Age of Extinction</a></td>
        <td>10</td>
        <td>2014</td>
        <td>18%</td>
        <td>$1.0B</td>
      </tr>
    </tbody>
  </table>
</div>

Tablesaw在Safari上不起作用

1 个答案: