gpt4 book ai didi

html - Tablesaw 不适用于 Safari

转载 作者:行者123 更新时间:2023-11-28 01:21:01 24 4
gpt4 key购买 nike

我有一个实现 tablesaw-stack 模式的表。它在 Google Chrome、Mozilla Firefox、Internet Explorer、Edge 上运行良好,直到最近我发现 tablesaw 布局在 Safari/iOS Safari 上失真。我已经尝试使用最新版本的 tablesaw 和 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 上的结果:

enter image description here

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

更新:我发现布局适用于声明的 <!DOCTYPE html> .但是,一旦我声明,该网页就不会加载我的 css 内容。我试过:

  1. 添加 type="text/css"-> 不起作用
  2. 添加 rel="stylesheet"-> 不起作用
  3. 在外部 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com