I have to make it in a Row but my result is something else-CodePudding

The result that I don't want:

The result which I want:

Using Bootstrap 4.4.1
also, use grids but no change occurs

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

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

CodePudding user response：

You are misusing the HTML <table> element. I suggest you apply styling rules to keep the two sections, with some CSS if necessary.

Keep it semantic! Imagine a blind user being told they are looking at a table, when in fact the information within isn't mean to be read in a tabular way.

There are several ways, but I would suggest reading this and this

CodePudding user response：

Here you go...

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3 Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>

<body>
  <div >
    <div >Page: 1/1</div>
    <div >
      <h3>@Model.BranchName</h3>
      <h2>Purchase Receive</h2>
    </div>
    <div >
      <table>
        <thead>
          <tr>
            <th >Print Date: </th>
            <td><span > @DateTime.Now</span></td>
          </tr>
          <tr>
            <th >Print at: </th>
            <td><span > @getLoginProp.BranchName</span></td>
          </tr>
          <tr>
            <th >Print by: </th>
            <td><span > @getLoginProp.UserName</span></td>
          </tr>
        </thead>
      </table>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2 poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ n" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft 2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>

</html>