在CSS中格式化表格内容

Question

现在我的桌子看起来像这样：

存储表格内容的HTML代码的一部分：

<table class="mTable">
    <tbody>
        <tr>
            <td id="c00">
                <div class="in_val">~val(0)~</div>
                <div class="in_ti">~name(0)~</div>
                <div class="in_to">~unit(0)~</div>
            </td>
            <td id="c01">
            <td id="c02">
        </tr>
    </tbody>
</table>

CSS代码：

.in_ti
{
  padding:2px;
  vertical-align:top;
  display:table-cell;
}

.in_val
{
  font-size: 38px;
  font-weight: bold;
  display:table-cell;

}

.in_to
{
  float:right;
  clear:right;
  padding:2px;
}

我试图收到看起来像这样的表格：

描述：我想在表中获取文本格式，其中name位于表格单元格的顶部中心，value（val）和unit位于表格单元格底部中心的一行中。我尝试使用display: inline，但我没有任何区别。

Answer 1

要实现这种理想的布局，需要做一些事情。首先，如果你想把名字作为第一个元素，你也应该把它放在你的html中：

<div class="in_ti">~name(0)~</div>
<div class="in_val">~val(0)~</div>                
<div class="in_to">~unit(0)~</div>

首先是名称而不是值和单位。

然后您可以在名称的类中添加以下代码：

.in_ti
{
  padding:2px;
  vertical-align:top;
  display:block;
  text-align:center;
}

我添加了display:block和text-align:center，以确保文字位于第1行。

对于值和单位，我添加了以下CSS（删除bg颜色，它们仅用于视觉方面，以查看对象的宽度有多大）：

.in_val
{
  font-size: 32px;
  font-weight: bold;  
  display:block;
  float:left;
  width:70%;
  background-color:red;
}

.in_to
{
  display:block;
  float:left;
  width:30%;
  line-height:36px;
  background-color:yellow;
}

总结一下，你得到了这个结果：JSFIDDLE