css - 列的响应表对齐

Question

在响应式表设计中，我得到了这个链接 jsfiddle.net/n4rUG/27/

这给了我以下输出：

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

这个怎么做？

Answer 1

text-align: right不适用于您的tds，因为它被具有更高特异性的 Bootstrap 样式覆盖。最快的解决方案就是添加!important. 另外，我建议让标签向左浮动（参见修改后的小提琴）：

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

Answer 2

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

参考您的图像，您可以像这样使用 colspan 设置列宽度：

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