table-cellを使い、二つの要素を縦横真ん中ん置く方法

Question

実現したいこと

<table>のセルの中で、「文字a」のすぐ横に「要素.triangle」を置きたいです。

発生している問題

「要素.triangle」が「文字a」のすぐ横でなく、セルの右端にいってしまいます。

該当のソースコード

よろしければお試しください。
https://jsfiddle.net/9u1rqt74/

このリンクのコードは次の通りです。

<table>
	<thead>
		<tr>
			<th class="a">a<div class="triangle"></div></th>
			<th class="b">b</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>あ</td>
			<td>い</td>
		</tr>
		<tr>
			<td>う</td>
			<td>え</td>
		</tr>    
	</tbody>
</table>

/*ソートの三角*/
.triangle {
	clip-path: polygon(0 0, 100% 0%, 50% 100%);
	width: 13px;
	height: 9px;
	right: 3px;
	position: absolute;
	background: red;
	top: calc(50% - 4px);
}

/*テーブル*/
table {
	border-collapse: collapse;
	width: 100%;
}

/*ソートの三角のための調整*/
th {
	padding-right: 20px !important;
	cursor: pointer;
}

/*ボーダー*/
th,
td {
	position: relative;
}
th:after,
td:after {
	border-right: 1px dotted #888;
	position: absolute;
	inset: 0 0 0 0;
	content: '';
	pointer-events: none;
}

/*文字を真ん中*/
th {
	text-align: center;
}

/*行の色*/
thead th {
	background: #DDDDDD;
}
tbody tr:nth-child(odd) > * {
	background: #F0F0F1;
}

試したこと

position: absolute;を解除し、flot: rightにしてみましたが、.triangleの高さが真ん中にきてくれません。

.triangle {
    /* position: absolute; */
    float: right;
}

position: absolute;を解除し、th.aをdisplay: flexにすればできましたが、やはりdisplay: table-cell;は解除したくありません。

.triangle {
    /* position: absolute; */
}
th.a {
    display: flex;
    align-items: center;
    justify-content: center;
}

Answer 1

下記でどうでしょう。

/*ソートの三角*/
.triangle {
	clip-path: polygon(0 0, 100% 0%, 50% 100%);
	width: 13px;
	height: 9px;
	/*right: 3px;
	  position: absolute; */
  background: red;
	/*top: calc(50% - 4px);*/
  display: inline-block; /* 追加 */
}

Comments

[nikuatsu]

ありがとうございます。

そちらかなり惜しいのですが、画面幅が狭いときに三角が下に行ってしまう問題が生じてしまいました。

次のリンクで、画面幅を最大限狭くして頂くと、その問題がお分かりいただけるかと思います。
https://jsfiddle.net/jytp9cgk/

このリンクは問題が分かりやすいよう一部変更を加えています。（コメントアウトした「変更1～4」が変更部分ですが、この変更がなくても同様です。）

[nikuatsu]

三角が下に行ってしまう問題の図説になります。
https://imgur.com/a/aH8SUaX

[hatena19]

th に white-space: nowrap; を追加すればどうでしょう。

[nikuatsu]

完璧です。うるさい注文にお答えいただきまして誠にありがとうございます。

Answer 2

right: 3px;を

right: calc(50% - 1em);あたりに調整するとか

Comments

[nikuatsu]

ありがとうございます。微調整もありかもしれませんね。