0

我有一个实现表锯堆栈模式的表。它在 Google Chrome、Mozilla Firefox、Internet Explorer、Edge 上运行良好，直到最近我发现 Safari/iOS Safari 上的表锯布局失真。我尝试过使用最新版本的 tableaw 和 Safari，但布局仍然失真。

密码笔

<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 内容。我努力了：

  1. 添加 type="text/css" -> 不起作用
  2. 添加 rel="stylesheet" -> 不起作用
  3. 在外部 css 文件中添加缺少的 px/% -> 不起作用
4

1 回答 1

0 

<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>

于 2018-07-24T08:01:11.680 回答