I need to achieve success in a straight line, but my outcome is veering off course

I am looking for a specific outcome:

https://i.sstatic.net/XUnrR.png

This is the desired result:

https://i.sstatic.net/XUnrR.png Utilizing Bootstrap version 4.4.1
attempting to use grids with no success 

<body>
  <div style="margin-left: 72%;">
    <table>
      <thead>
        <tr>
          <th class="font-weight-bold textleft">Print Date: </th>
          <td><span class="font-weight-light"> @DateTime.Now</span></td>
        </tr>
        <tr>
          <th class="font-weight-bold textleft">Print at: </th>
          <td><span class="font-weight-light textleft"> @getLoginProp.BranchName</span></td>
        </tr>
        <tr>
          <th class="font-weight-bold textleft">Print by: </th>
          <td><span class="font-weight-light textleft"> @getLoginProp.UserName</span></td>
        </tr>
      </thead>
    </table>
  </div>

  <h3>@Model.BranchName</h3>
  <h2>Purchase Receive</h2>
</body>

htmlcssbootstrap-4frontend

Answer №1

You seem to be using the HTML <table> element incorrectly. To ensure proper structure, I recommend applying styling rules and utilizing CSS to separate the two sections.

It's important to maintain semantic integrity. Consider a scenario where a visually impaired user is informed that they are viewing a table, even though the content isn't intended for tabular presentation.

There are various approaches you can take, but I suggest checking out this resource and this guide

Answer №2

Below is the solution provided for you:

 <body>
    <div class="d-flex justify-content-between">
      <div>
        <h3>@Model.BranchName</h3>
        <h2>Purchase Receive</h2>
      </div>
      <div>
        <table>
          <thead>
            <tr>
              <th class="font-weight-bold textleft">Print Date:</th>
              <td>
                <span class="font-weight-light"> @DateTime.Now </span>
              </td>
            </tr>
            <tr>
              <th class="font-weight-bold textleft">Print at:</th>
              <td>
                <span class="font-weight-light textleft">
                  @getLoginProp.BranchName
                </span>
              </td>
            </tr>
            <tr>
              <th class="font-weight-bold textleft">Print by:</th>
              <td>
                <span class="font-weight-light textleft">
                  @getLoginProp.UserName
                </span>
              </td>
            </tr>
          </thead>
        </table>
      </div>
    </div>
  </body>

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

"Enhance Your Design with Hovering CSS Backgrounds

Seeking assistance with changing the background image on span hover. If anyone can assist, I have included the complete code for the website below. Take a look at the full website code here: Pastebin CSS Pastebin JavaScript ...

javascriptcss

Reset a form input using jQuery

There is an ajax method in place that reloads only a specific div upon receiving a service response. success: function (response) { $( "#list" ).load(window.location.href + " #list" ); $( "#badge" ).load(window.location.href + " #badge" ); $ ...

jqueryhtmlajax

The overflow issue arising from the off-canvas menu is causing a clash with the par

I am currently working on a website project and have encountered a peculiar issue. I am using parallax for background images in two sections of the site. The parallax effect works fine without setting an overflow rule, but when I add it, the parallax effec ...

jqueryhtmlcss

Differences in layout design when using floats and display: table between Chrome and Firefox can affect the visual appearance

Try out this link on JS Fiddle: https://jsfiddle.net/7p81bnto/2/ Here's the HTML code: <body> <main> <div> <div style=" height: 50px; width: 200px; ...

htmlcssgoogle-chromefirefox

CSS3 translate3D causing input element glitches on Android Webkit

I am encountering some challenges with the Input element in a Webkit Android application that I am currently working on. While testing on version 2.X, it seems that version 3.x does not exhibit these same issues... The structure of the app involves indivi ...

androidcssinputwebkittranslate3d

Unique arrangement of hexagons in a honeycomb layout with precise centering

Currently, I am having trouble creating hexagonal blocks with content in a specific layout. My goal is to have four blocks starting with one at the top, followed by a row of two, and finishing with a row of one as shown in the image below. Unfortunately, a ...

cssresponsive-designhexagonal-tiles

Do the Push Notification APIs in Chrome and Firefox OS follow the same set of guidelines and standards?

Do Chrome and Firefox OS both use Push Notifications APIs that adhere to the same standard? If not, is either one moving towards standardization? ...

javascripthtmlgoogle-chromefirefox

The display property in CSS can be used to make a table fill out the horizontal space without

I am facing a challenge with floats inside two containers. I need the containers to wrap around the floats while maintaining a minimum height of 100% for both of them (container>another container>floats). I attempted using minimum height, however, i ...

htmlcssfloating

Activating the mousewheel effect exclusively on specific div sections, rather than the entire page

After researching mousewheel events in jQuery, I realize that my lack of knowledge may be hindering my ability to find useful answers. I am looking to create a mousewheel effect that is only triggered within a specific div called #scroller. Currently, I am ...

javascriptjqueryhtmlcssmousewheel

No Google Adsense ad in sight

Having an issue with my Adsense ad, the script is in the page source code but the ad itself is not appearing. You can check it out for yourself by clicking the link below. The ad should be displayed at the top of the topic. To view the page, click here: ...

pythonhtmlflaskadsense

Incorporating information into an HTML webpage

Question: How can I create a dropdown menu in HTML with a list of languages (e.g. English, French) and display them based on the native language? I want to show the languages in their respective native language on the combo box (e.g. "french" displayed a ...

mysqlhtmlframeworksinternationalization

Using conditional logic to render components in VueJS

How can I conditionally display content in a parent component based on a user input variable? If the userinput variable is false, I want to remove the <div class="parent"> and show the PopUp component instead. I've tried using `v-if` ...

javascripthtmlvue.jsvue-componentconditional-rendering

"Upon clicking the submit button, no action is triggered and no _POST values are being received

When a user clicks on my submit button, nothing seems to happen. The HTML code for the button is as follows: <td colspan="3"> <div align="center"> <input name="Decline" id="Decline" value="Decline" type="submit"> ...

phphtmlpostinputsubmit

When I hover over the navigation bar, a submenu pops up. However, as I try to navigate to the submenu, I often end up accidentally selecting a different item on the navigation bar

I'm trying to find an answer but can't seem to remember where I saw it. Here's the situation: a horizontal nav bar with a dark blue selection and a red sub-menu. When the user hovers over a black arrow, it crosses into a light-blue nav item ...

cssreactjsnavigation

Implementing Window.Open function within a jQuery Modal

I've set up my Modal Div like this: <div id="dialog-modal" title="Open File"> <img alt="progress" src="images/ajax-loader.gif"/> </div> When I click the button, the modal appears and I can see the progress icon. <sc ...

javascriptjqueryhtmlasp.netjquery-ui

Display Bootstrap Modal Box automatically when Angular 8 App Loads

I am facing an issue with launching a modal dialog on page load in my Angular 8/Visual Studio project. While it works perfectly fine with the click of a button, I am unable to make it load automatically on page load. I have tried using *ngIf but it doesn&a ...

angularbootstrap-4modal-dialog

Struggling to showcase array data in a visually appealing table format?

Hello, I am currently facing the following issue Here is a snapshot of my current website; https://i.sstatic.net/pNXNx.png I am trying to display content in a table from an array stored in a JSON file. Initially, I used a foreach loop which worked perfe ...

phphtmlarraysjsonkey

Prevent the display of HTML tags in ASP.NET

Looking for a way to prevent a specific HTML tag from being printed in my ASP.NET project view file, whether through a printer or to a PDF file. Are there any HTML or CSS attributes that can help achieve this? How should they be configured? I have alread ...

c#htmlcssasp.net

The placement of the breadcrumb trail is not in the right position

My website includes a menu and breadcrumbs. The menu consists of two submenus: Design Services, Design Portfolio, Design Fees, About Us, Contact Us, Design Resources, Design Vacancies, and Terms. Clicking on Design Services reveals Graphic Design, Logo Des ...

javascriptjqueryhtmlcssmenu

Can we not customize a nested component using the 'styled()' function in MUI?

Looking at the code snippet below, my attempt to style an MUI Stack component within an MUI Dialog component seems to be falling short. The Stack styles are not being applied as expected: const CustomDialog = styled(Dialog)(({ theme }) => ({ ' ...

javascriptcssreactjsmaterial-ui