iOSのブラウザにて、TDタグ内で勝手に追加される電話リンクを無効にしたかったが妥協した

確認した環境

iOS 17.4.1
Chromeアプリ 125.0.6422.80

本文

iOSのChromeアプリやSafariでは10桁前後の数字が存在していると勝手にリンクが貼られるという大きなお世話機能がある。

で、TDタグ内の数字に対して、その現象が発現したため以下の対応をしようとしたのだが…

全く効果がなかった…

index.html

<meta name="format-detection" content="telephone=no">

疑似コード(Vue)

<td>{{item.kaine}}</td>
<td>{{item.urine}}</td>

style.css

/* 効果なし */
td {
  text-decoration: none;
  pointer-events: none;
}

/* 効果なし */
td a {
  text-decoration: none;
  pointer-events: none;
}

/* 効果なし */
td a[href^="tel:"] {
  text-decoration: none;
  pointer-events: none;
}

以下のようにしたら効果があったがバッドノウハウすぎる…

疑似コード(Vue)

<td><a>{{item.kaine}}</a></td>
<td><a>{{item.urine}}</a></td>

style.css

td a {
  text-decoration: none;
  pointer-events: none;
}

ちなみにAタグではなくDIVタグを使うと効果なしだった

疑似コード(Vue)

<td><div>{{item.kaine}}</div></td>
<td><div>{{item.urine}}</div></td>

style.css

td div {
  text-decoration: none;
  pointer-events: none;
}

結局どうしたのか

しょうがないのでカンマ区切りにしてお茶を濁した。

疑似コード(Vue)

<td>{{item.kaine.toLocaleString()}}</td>
<td>{{item.urine.toLocaleString()}}</td>

終わり。