Is it possible to align text to the left between Bootstrap 4 tables?

image showing times and comments not aligned

I am attempting to perfect the alignment of times and comments in separate 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;
    ?>

    //Code checks if new date is encountered. If so, a new table starts.

    <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 display times and comments that are properly aligned within each table, but not consistently between tables.

I have experimented with using the class "text-sm-left" sans its own div, but it did not yield the desired outcome. Additionally, I tried utilizing the class "text-left" with no success. An image has been uploaded to illustrate the issue with misaligned tables.

Answer №1

Here is the answer with assistance from @wazz and this source

<?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 validation performed here to determine if it's a new date. If true, begin a 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
}
?>

alignment of columns between tables

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Toggle the visibility of DIV content based on the current URL

In my HTML page, I have a div-reportControlPanel as shown below. Additionally, I have included another div-reportControlPanel1 with a different ID. <div id="reportControlPanel" class="pentaho-rounded-panel-bottom-lr pentaho-shadow"> <div id="prom ...

When a user clicks on the div, it expands in size and then returns to

I developed a small quiz, where clicking on an answer moves the checkmark to the clicked div. const answers = document.getElementsByClassName('answer'); [].forEach.call(answers, function(answer) { $(answer).click(function() { if (!answer ...

Ways to modify the default text in a dropdown menu?

I'm currently attempting to modify the title of a dropdown using the Multi-select plugin found here. However, I've encountered an issue where I am unable to dynamically change the text (Dropdown title) of the dropdown using JavaScript. $(' ...

The alignment issue with Spring MVC Form Checkbox and Label

I'm attempting to position a <form:checkbox> to the left of a <form:label> using this code snippet: <form:checkbox path="acceptTerms" id="acceptTerms"/> <form:label path="acceptTerms">Accept Terms</form:label> Despite m ...

Pointer-events property in pseudo elements not functioning as expected in Firefox browser

I have a horizontal menu that includes mid-dots (inserted using the ::after pseudo element) to separate the menu items. I want to prevent these mid-dots from being clickable. This works fine in Safari, but in Firefox (v.47), the pointer-events: none prope ...

Tips for aligning flex columns in a single row on mobile screens

I am in need of assistance with my HTML template. I would like to create a flex column for my data list, but I am encountering an issue where the Tick icon is appearing on the second row on mobile devices instead of staying in a single row without a line b ...

What steps do I need to follow in order to perform a particle design simulation on my laptop

Recently, I attempted to utilize some of the particle designs featured on this website https://speckyboy.com/particle-animation-code-snippets/, but encountered difficulties. I have included both the stylesheet and javascript files, yet the design does not ...

Guide to positioning text so the baseline aligns with a specific point in HTML/CSS

After developing an algorithm that converts text from SVG to HTML, I encountered a discrepancy in the positioning of the text. The issue stems from the difference in coordinate systems between SVG and HTML; SVG's origin is at the bottom left while HTM ...

Issue with sidebar display inconsistency when resizing the window

Struggling with the sidebar display issue on mobile, as the menu appears outside the sidebar when resized. Is it feasible to relocate the bar to the top and resize it for a better mobile view experience? Adjusting the navbar's position affects the hea ...

I'm encountering difficulties with customizing the root styling of material-ui's DialogActions

Check out the two buttons in a DialogActions just like this. This is the JSX snippet I'm working with: <DialogActions classes={{ root: classes.dialogActionsLeft }}> <Button autoFocus onClick={() => { setOpen(false); }} ...

Utilizing React's Conditional Rendering Alongside Bootstrap to Maintain the Layout Intact

I'm currently developing a project using React and Bootstrap that involves incorporating a large bar graph with two smaller boxes, all positioned horizontally together. To visualize how it should appear, please expand the pen window to see them arran ...

Creating a standalone card using Bootstrap

Trying to create this... https://i.stack.imgur.com/PMRSI.png However, I'm unsure of how to achieve it. <div class="row justify-content-center"> <div class="col-3 me-3" style="background-color: #F1F3F8; border-r ...

What steps can I take to troubleshoot when my vue.js styles are not being applied correctly?

I am trying to make these 2 styles work together <style scoped> >>> .description { white-space: nowrap !important; color: red; } >>> li a { text-decoration: none !important; } </style> Please review my code below ...

WebView on Android still showing highlighted text even after selection has been cleared

When using my web app on an android WebView, I've noticed that whenever I click on something or navigate somewhere, a blue highlight appears on the container div. It sometimes disappears quickly, but other times it remains until clicking elsewhere. I ...

Why does the "margin" CSS style fail to function properly in FlowPanel within GWT?

I'm currently working with Gwt and have encountered a problem with styling buttons. Let's take a look at the following code snippet: .marginRight{ margin-right: 10px; } FlowPanel myFP=new FlowPanel(); Button myButton=new Button("Button"); Butt ...

Blending HTML template and WordPress PHP file

I am facing a challenge while attempting to implement a Wordpress template on one of the pages of my website, specifically at http://www.windowblindshadeshutters.com/blog/. The blog has been successfully created, however, I am having trouble preserving our ...

Steps for designing an animated background element

Hey there, I'm a newcomer here and I have a question that I couldn't find the right place to ask. I am currently working on creating my new portfolio website and I would like to add a moving cloud effect in the background. The idea is for the clo ...

The React style background property for CSS styling

Is there a way to apply the css property background inline in react? I attempted to pass the following object without success: let style = { background: `linear-gradient( rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6) ...

Internet Explorer experiences performance issues when a table containing over 500 rows is being utilized

Can anyone offer advice on speeding up the display of large tables with 500+ rows in Internet Explorer? Here is my current approach: The MySQL query result includes 500+ rows, which I then loop through using a while loop to display: echo "<tr class=& ...

Is there a way to accomplish this using Bootstrap?

Hello there! I have a piece of code that is working with both bootstrap and Pixedelic camera. Here it is: <section id="slider" class="container-fluid"> <div class="row fluid"> <div id="camera_wrap_1"> <div data-src="conten ...