在 Table 内对齐

Question

好的，我的问题如下 - 我在 table 中工作，其中有一个日期和时间列，我希望时间全部左对齐 - 当有 100 个实例时它开始看起来非常混乱，就像下面的例子一样，因为每次都从不同的地方开始。我玩过 flex 但它使日期和时间在宽屏上彼此远离，有什么想法吗？

2020 年 2 月 17 日 3:24 上午
2019 年 12 月 4 日 3:10 上午
2019 年 12 月 3 日 12:22 下午

只是一个非常简单的代码示例来演示这一点 ->

<html>
  <body>
    <table width='200px'>
      <tbody>
        <tr>
        <td >Feb, 17, 2020 3:24 am</td> <br/>
        </tr>
        <tr>
        <td>Dec, 4, 2019 3:10 am</td> <br/>
        </tr>
        <tr>
        <td>Dec, 3, 2019 12:22 pm</td>
        </tr>

    </table>
  </body>

</html>

Answer 1

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 300px;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

.time_position {
  margin-right: 5px;
  float: left;
}

<table>
  <tbody>
    <tr>
      <td> Feb, 17, 2020 <span class="time_position">3:24 am |<span></td>
        </tr>
        <tr>
        <td>Dec, 4, 2019 <span class="time_position">3:10 am |</span></td>
    </tr>
    <tr>
      <td>Dec, 3, 2019 <span class="time_position">2:22 pm |</span></td>
    </tr>

</table>

希望对您有所帮助...

在 Table 内对齐

Aligning within Table

html

css

html-table

alignment

text-alignment