html - 表格 - 头部在左，内容在右，都在一条垂直线上

Question

我正在尝试制作一个表格，其列标题位于单元格的左侧，内容位于右侧但在一条垂直线上。图片示例 - image

我试过填充、边距和空白

.container {
  width: 600px;
}

table {
  width: 100%;
}

td {
  border: 1px solid red;
  border-collapse: separate;
}

.one {
  width: 75%;
}

.two {
  width: 25%;
  text-align: right;
}

.two button:first-child{
  margin-left: 20px;
}

.two button:last-child {
  margin-right: 17px;
}

<div class="container">
  <table>
    <tr>
      <td>Title One</td>
      <td>
        <p>Title Two</p>
      </td>
    </tr>
    <tr>
      <td class="one">Lorem</td>
      <td class="two">
        <button>Edit</button>
        <button>Delete</button>
      </td>
    </tr>
  </table>
</div>

目前结果如下:[ http://jsfiddle.net/paciek/Lzdb3uhp/12/我期待所附图片中的外观。当然，没有说明问题的绿线。如果它可以很容易地转换成 RWD 就好了。

Answer 1

您可以使用以下样式使您的内容与“标题二”对齐:

td p{
margin-left: 29px;}