Can I left align text between Bootstrap 4 tables?

Question

image showing times and comments not aligned

I'm trying to left align the time and comments in different tables.

<?php
while ($line = mysqli_fetch_array($result, MYSQLI_ASSOC)){
    $time = date("H:i", strtotime($line["event_date"]));
    $date = date_format($nice_date, "l, jS F");
    colours = array("table-active", "table-success", "table-warning", "table-danger", "table-info");
    $i = 0;
    ?>

    //Some checking done here to see if new date. If so, start new table.

    <h2><?php echo $date; ?></h2>

    <div class="container">
        <table class="table table-sm">
            <tbody>
                <tr class=<?php echo $colours[$i % 5]; ?>>
                        <th scope="row"></th>
                        <td><div class="text-sm-left" ><?php echo $time;?></div></td>
                        <td><div class="text-sm-left" ><?php echo $line["comment"];?></div></td>
                </tr>
            </tbody>
        </table>
    </div>

<?php
}
?>

The tables print with times and comments which are aligned within a table but not from table to table.

I've tried to use the class "text-sm-left" without its own div. That didn't work. I've tried the class "text-left" also. That didn't work. I've attached an image showing the tables with the times and comments out-of-alignmnet.

Looks like the alignment is based on how much content there is; the amount of content changes the column widths. You'll have to decide on a width for each column (or just the left column) and apply that. — wazz, Dec 07 '17 at 19:30

score 0 · Accepted Answer · answered Dec 11 '17 at 15:05

Here's the solution with some help from @wazz and here

<?php
while ($line = mysqli_fetch_array($result, MYSQLI_ASSOC)){
    $time = date("H:i", strtotime($line["event_date"]));
    $date = date_format($nice_date, "l, jS F");
    colours = array("table-active", "table-success", "table-warning", "table-danger", "table-info");
    $i = 0;
?>

    //[...]Some checking done here to see if new date. If so, start new table.

    <h2><?php echo $date; ?></h2>

    <div class="container">
        <table class="table">
            <tbody>
                <tr class="row m-0 <?php echo $colours[$i % 5]; ?>">                         
                        <td class="d-inline-block col-2" ><?php echo $time;?></div></td>
                        <td class="d-inline-block col-10" ><?php echo $line["comment"];?></div></td>
                </tr>
            </tbody>
        </table>
    </div>

<?php
}
?>

columns aligned from table to table

Can I left align text between Bootstrap 4 tables?

1 Answers1