css - テーブル行の偶数セル (n 番目のセル) の動的サイズ

Question

行ごとに 4 つのセルがあるテーブルがあります。他のセルの幅を変更せずに、2 番目と 4 番目のセルを拡大することはできますか? クラスを使用したいので、1番目と3番目のセルに固定幅を設定せずにこれを行うことはできますか?

|cell1|cell2       |cell3|cell4        |

別の架空の行

|cell1|cell2            |cell3|cell4           |

編集：これは私が達成したい結果です。セル 2 とセル 4 は同じ幅にする必要があり、可能であれば、ウィンドウ サイズに応じて動的にする必要があります。セル 1 と 2 も同じ幅にする必要があります。2 つの例は同じテーブルのものではなく、アイデアを説明するためのものです。

Answer 1

いいえ、それを行うには、各行が独自のテーブルである必要があります。

//row 1
<table>
  <tr>
    <td>1</td><td>2</td><td>3</td><td>4</td>
  </tr>
</table>

//row2
<table>
  <tr>
    <td>1</td><td>2</td><td>3</td><td>4</td>
  </tr>
</table>

Answer 2

% を使用して、次のようにコンテナーに関して動的にすることができます。

/*Second and fourth cells*/
div#containerId table td:first-child + td,
div#containerId table td:first-child + td + td + td
{
    width: 30%; 
}
/*First and third cells*/
div#containerId table td:first-child,
div#containerId table td:first-child + td + td
{
    width: 10%; 
}