列的响应表对齐

Question

在响应表设计中引用我有这个链接jsfiddle.net/n4rUG/27 /

这给了我以下输出：

现在我想将标题左对齐，将值对齐 意味着它需要看起来正确对齐

怎么做？

Answer 1

text-align: right对td不起作用，因为它被具有更高特异性的Bootstrap样式所覆盖。最快的解决方案就是添加!important。另外，我建议将标签浮动到左侧（参见modified fiddle）：

    td {
        ...
        text-align: right !important;
        overflow: hidden; /* for containg floats */
    }
    td:before {
        ...
        float:left;
    }

Answer 2

您的JSFiddle与您帖子中的图片不同。

参考你的图片，你可以这样做，使用colspan设置你的colums宽度：

<table>
   <colgroup>
      <col width="100px" />
      <col width="200px" />
   </colgroup>
   <tr>
      <td>title</td>
      <td>value</td>
   </tr>
   <tr>
      <td>title</td>
      <td>value</td>
   </tr>
...
</table>

至于你的JSFiddle，你有5 <th>和6 <td>。但是，有可能<th>中的一个应该覆盖两个<td>，你可以使用这个来实现：

<th colspan="2">Title</th>