我有一个实现 tablesaw-stack 模式的表。它在 Google Chrome、Mozilla Firefox、Internet Explorer、Edge 上运行良好，直到最近我发现 tablesaw 布局在 Safari/iOS Safari 上失真。我已经尝试使用最新版本的 tablesaw 和 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 内容。我试过:
- 添加 type="text/css"-> 不起作用
- 添加 rel="stylesheet"-> 不起作用
- 在外部 css 文件中添加缺失的 px/% -> 不起作用
最佳答案
<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>关于html - Tablesaw 不适用于 Safari，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51493117/