table要素の背景色を一部だけ画面幅いっぱいに広げたい

Question

前提・実現したいこと

table要素の中の背景色を一部分だけ画面幅いっぱいに広げたいと思っています。

試したこと

th、td要素にcalcを記述して幅いっぱいに広げようとしましたがうまくいきませんでした。
table要素ではmarginがきかないと出てしまったのでcalcが使用できないようで困っています。
なにか別の方法はありますか？

該当のソースコード

<table>

<tr>
<th class="bg">タイトル1</th>
<td class="bg">本文1</td>
</tr>
<tr>
<th>タイトル2</th>
<td>本文2</td>
</tr>
<tr>
<th class="bg">タイトル2</th>
<td class="bg">本文2</td>
</tr>

</table>

table {
	position:relative;
	width: 100%;
	max-width: 1000px;
	border-collapse: collapse;
	margin: 0 auto;
}

table th.bg,
table  td.bg {
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  background: #ececec;
}

追記

質問いただいた箇所の画像を追加します。

Comments

[m.ts10806]

＞table要素ではmarginがきかないと出てしまったので

出典明示してください。

[mupo]

firefoxの開発ツールでcssを確認するとmargin: 0 calc(50% - 50vw);部分がグレーアウトになっており「marginはテーブルを構成する要素に影響を及ぼしません」と書かれています。

[m.ts10806]

画面キャプチャで良いので質問本文に提示いただけますか？
質問は編集できます。

[yambejp]

max-width指定をやめて全幅テーブルにしてはいけないのでしょうか？
テーブルじゃないところをテーブルのように見せる必要性はなんでしょう？

[mupo]

追記で画面キャプチャをしました。

>max-width指定をやめて全幅テーブルにしてはいけないのでしょうか？

デザイン的に背景色を画面いっぱいに広げたいだけで、テーブルの中身（テキストが書いてある箇所）まで広げたいわけではないのでその方法ではうまくいきませんでした。

Answer 1

疑似要素を使うのはどうでしょうか。

    :where(table th.bg,table td.bg)::before {
      content: "　";
      display: block;
      position: absolute;
      z-index: -1;
      width: 100vw;
      margin: 0 calc(50% - 50vw);
      background: #ececec;
      text-align: center;
    }

Comments

[mupo]

：whereという疑似要素の書き方を初めて知りました。ありがとうございます！
こちらの方法を使用させていただき、無事に表示ができました。

[Lhankor_Mhy]

お役に立てたようで何よりです。

なお、:where は疑似要素ではないです。::before が疑似要素です。念のため。

また、行に折り返しが発生した場合は、これでは上手くいかないかもしれません。
その場合は、height をなんとかする方向だと思います。もしかすると、ラップ要素が必要かもしれません。