对齐表格，居中对齐（td），将文本留在td内

Question

我正在尝试对齐表格，居中（td）并将文本留在td内；

我尝试使用 flex 对齐中心，这种方式可以做到，但不能向左对齐。

我已经看到了使用padding-left: 50%的解决方案，但这不符合我的需求。

table {
    color: #212121;
    font-size: .875rem;
    margin: 1.25rem 0; 
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    border: 1px solid red;
}


tr {
    display:flex;   
    width: 100%;
    justify-content: center;
}

tr td { 
    max-width: 50%;
    text-align:left;
    border: 1px solid blue;
}

<table>
  <tbody>
    <tr>
      <td>lorem ipsum</td>
      <td>alpha</td>
     </tr> 
     <tr>
      <td>lorem ipsum ipsum</td>
      <td>teata ipsum alpha</td>
     </tr>                
   </tbody>
</table>

我想获得什么：

边界线仅用于距离比较

Answer 1

您可以在表格中插入span标签，html代码：

final Method uuid = dog.getClass().getMethod("uuid_");
final Object o = uuid_.invoke(dog);

css代码：

 <table>
      <tbody>
        <tr>
          <td><span>lorem ipsum</span></td>
          <td><span>alpha</span></td>
         </tr> 
         <tr>
          <td><span>lorem ipsum ipsum</span></td>
          <td><span>teata ipsum alpha
            teata ipsum alpha</span></td>
         </tr>                
       </tbody>
    </table>

此结果的链接： https://jsbin.com/huvitefeqe/edit?html,css,js,output

Answer 2

JsFiddle

tr {
    display:flex;   
    width: 50%;
    margin: 0 auto;
    justify-content: center;
}

tr td { 
   max-width: 50%;
   text-align:left;
   border: 1px solid blue;
   width: 100%
}

将width: 50%; margin: 0 auto;添加到tr并将width: 100%添加到tr td。希望您期待这样的输出。

您可以看到td位于表格的中心，文本也位于td的左侧。

Answer 3

边界间距可以解决这个问题。

table {
    color: #212121;
    font-size: 0.875rem;
    margin: 1.25rem 0;
    border-collapse: separate;
    table-layout: fixed;
    width: 100%;
    border: 1px solid red;
    border-spacing: 5px 0;
}

td {
  padding: 10px 10px;
  border: 1px solid blue;
}

<table>
  <tbody>
    <tr>
      <td>lorem ipsum</td>
      <td>alpha</td>
     </tr> 
     <tr>
      <td>lorem ipsum ipsum</td>
      <td>teata ipsum alpha</td>
     </tr>                
   </tbody>
</table>