单元格中的 HTML div - 拉伸(stretch)、定位等

Question

已经读了很多书，甚至现在可以做一些，但不是一起)请帮忙。 我需要包含标题和由一个字符组成的“图标”的 th。我需要标题左对齐，图标右对齐。在同一时间。并且它们都必须垂直位于单元格的中间。并且图标也应该位于 div 的中心/中间。请帮忙。我无法对齐标题，也无法对齐其 div 中的图标。不知道为什么，看起来 html/css 是外星人发明的，我不明白那个逻辑，也不明白怎么可能把这么简单的事情搞得这么愚蠢)

这是我需要的截图

table
{
    border-collapse: collapse;
    border-spacing: 0;
}
th
{
    border: 1px solid #fff;
    white-space: nowrap;
    background: #000;
    color: #fff;
    padding: 0.5em;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
}
td
{
    border: 1px solid #fff;
    white-space: nowrap;
    background: #eee;
    width: 20em;
    padding: 0.5em;
    text-align: center;
    vertical-align: middle;
}
div.left
{
    display: inline-block;
    text-align: left;
    vertical-align: middle;
    border: 1px solid #7f9;
}
div.right
{
    text-align: center;
    vertical-align: middle;
    position: relative;
    height: 2em;
    border: 1px solid #f79;
    display: inline-block;
    float: right;
    width: 2em;
}
div.reload
{
    border: 1px solid #79f;
    text-align: center;
    vertical-align: middle;
    width: 2em;
    height: 2em;
    position: absolute;
    right: 0;
    bottom: 0;
    display: table;
}

<table>
    <tr>
        <th>
            <div class="left">Title 1</div>
            <div class="right">
                <div class="reload">&#x27f3;</div>
            </div>
        </th>
        <th>
            <div class="left">Title 2</div>
            <div class="right">
                <div class="reload">&#x27f3;</div>
            </div>
        </th>
    </tr>
    <tr>
        <td>
            Some data
        </td>
        <td>
            123.45
        </td>
    </tr>
</table>

已找到答案(根据您的建议，谢谢!!!) 这很简单，但仍然很愚蠢:)

table
{
    border-collapse: collapse;
    border-spacing: 0;
}
th
{
    border: 1px solid #fff;
    white-space: nowrap;
    background: #000;
    color: #fff;
    text-align: left;
    vdrtical-align: middle;
    line-height: 2em;
}
td
{
    border: 1px solid #fff;
    white-space: nowrap;
    background: #eee;
    width: 20em;
    padding: 0.5em;
}
div.left
{
    display: inline-block;
    text-align: left;
    vertical-align: middle;
    border: 0px solid #7f9;
    display: inline-block;
        float: left;

}
div.reload
{
    border: 1px solid #999;
    text-align: center;
    vertical-align: middle;
    width: 1.5em;
    margin: 0.2em;
    line-height: 1.5em;
    right: 0;
    bottom: 0;
    display: inline-block;
    float: right;
}

<table>
    <tr>
        <th>
              <div class="left">Title 1</div>
              <div class="reload">&#x27f3;</div>
        </th>
        <th>
            <div class="left">Title 2</div>
            <div class="reload">&#x27f3;</div>
        </th>
    </tr>
    <tr>
        <td colspan=2>
            Some data
        </td>
        <td colspan=2>
            123.45
        </td>
    </tr>
</table>

Answer 1

也许是这样的？

CSS:

.view-table
{
   display:table;
   width:100%;
}
.view-row
{
   display:table-row;
}

.view-row > div
{
   display: table-cell;
}
.left 
{
   text-align:left;
   background-color: lightblue;
}
.right
{
   text-align:right;
   background-color: pink; 
 }

HTML:

 <div class="view-table">
    <div class="view-row">
       <div class="left">Title</div>
       <div class="right">&#x27f3;</div>                
    </div>
 </div>