Search code examples
htmlcsshtml-tablealignmenttext-alignment

Aligning within Table

Okay so my question goes as follows - I'm working in a table where I have a column for the date and time and I want the time to all be left aligned - when there's 100s of instances it starts looking really cluttered just like in the example below since each time starts at a different place. I played around with flex but it's making the date & time far away from each other on wide displays, any ideas?

Feb, 17, 2020 3:24 am
Dec, 4, 2019 3:10 am
Dec, 3, 2019 12:22 pm

Just a very simple code example to demonstrate this ->

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

This image shows the date & time in the menu and the bad formatting present

Solution 

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

    I hope this would be helpful...