CSSを使用して、「A」を「B」の下端/端に「ぴったり」配置する方法。「B」の幅とテキストの折り返しが不明
現在ソートされている列のヘッダーにアイコンが表示される「ソート可能な」テーブルがあります。 ソートアイコンはテキストの最後に表示されます(つまり、LTR / RTLをサポートしています)。現在を使用していdisplay:flexます。ただし、テーブルの幅が小さくなり、列ヘッダーのテキストが折り返され始めると、並べ替えられている列が明確でないあいまいな状態になります。 代わりに、次の要件を満たしたいと思います。 アイコンは常に、テキストの最長の行の「端」に「ぴったり」と位置合わせされます(ラッピングセル/ボタンが広い場合でも)。 アイコンは、テキストの最後の行と下揃えにする必要もあります。 アイコンはそれ自体の行に折り返してはなりません。 ボタンが存在し、セルの幅全体に及ぶ必要があります。(内部のスタイル設定であり、マークアップは必要に応じて変更できます。) CSSとHTMLは、可能な場合のみ。 既知の/設定された列幅やヘッダーテキストに依存することはできません。 例えば: 私はの異なる組み合わせの束を試してきましたdisplay: inline/inline-block/flex/grid、position、::before/::after、とさえfloat(!)が、所望の動作を得ることができません。これが問題を示す私の現在のコードです: .table { border-collapse: collapse; width: 100%; } .thead { border-bottom: 3px solid #d0d3d3; } .thead .tr { vertical-align: bottom; } .button { padding: 1rem; text-align: start; font-family: Arial, "noto sans", sans-serif; font-size: 0.875rem; border: 0; background-color: …