单元格中的HTML div - 拉伸，定位等

Question

已经阅读了很多，甚至现在可以做一些，但不能在一起）请帮忙。 我需要包含标题和＆＃34;图标＆＃34;由一个char组成。我需要标题左对齐和图标 - 右对齐。在同一个。并且它们都必须垂直位于单元格的中间。并且图标也应该位于div的中心/中间。请帮忙。我无法对齐标题，也无法在div中对齐图标。 Dunno为什么，看起来像html / css是由外星人发明的，我不明白这种逻辑以及如何使这么简单的事情如此愚蠢地复杂化）

这是我需要的屏幕截图

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

找到了答案（根据您的建议，谢谢！） 这很容易而且仍然很愚蠢：）

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>

Answer 2

如果您想要th右侧的图标和左侧的标题，则需要text-align-last:justify代替text-align:center。 请注意，div.reload上还需要另一个text-align-last，否则text-align将无效！

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

或者，this fiddle。