Bootstrap 4.5 text-nowrap not working as expected in table

Question

How can I remove the space between two columns? I need the below-highlighted space to be removed.

I tried text-nowrap but didn't work as expected.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet">
<style>
  .hiddenFramehideclass {
    position: absolute;
    top: -1px;
    left: -1px;
    width: 1px;
    height: 1px;
  }
</style>



<div class="container shadow p-3 sm-5 bg-white rounded">
  <form method="post" class="needs-validation" action="" enctype="multipart/form-data" id="registerform" target="hiddenFrame">
    <h2>Register</h2>
    <hr />
    <table class="table table-borderless text-nowrap">
      <tbody>
        <tr>
          <td>
            <label for="firstnameid">First Name: </label>
          </td>
          <td>
            <input id="firstnameid" type="text" placeholder="First Name" class="form-control" name="txtfirstname" required />
          </td>
        </tr>

        <tr>
          <td>
            <label for="lastnameid">Last Name: </label>
          </td>
          <td>
            <input id="lastnameid" type="text" placeholder="Last Name" class="form-control" name="txtlastname" required />
          </td>
        </tr>

        <tr>
          <td>
            <label for="emailid">Email: </label>
          </td>
          <td>
            <input id="emailid" type="email" placeholder="Email" class="form-control" name="txtemail" required />
          </td>
        </tr>

        <tr>
          <td>
            <label for="passwordid">Password: </label>
          </td>
          <td>
            <input id="passwordid" type="password" placeholder="Password" class="form-control" name="txtupass" required />
          </td>
        </tr>
      </tbody>
    </table>
    <hr />
    <button type="submit" id="registersubmitbutton" class="btn btn-success" name="btn-register"><i class="fas fa-user-plus"></i> Register</button>
    <br /><br /><br />
    <span id="login_link"> <a href= "login">Login Here</a> </span>

    <hr />


  </form>

  <iframe name="hiddenFrame" class="hiddenFramehideclass"></iframe>
</div>

Answer 1

As described in this answer, you can just define a small width like 1px for your first column, because table cells are expanded to the smallest size to fit its content, which will automatically remove this whitespace.

Here is your adjusted code example:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet">
<style>
  .hiddenFramehideclass {
    position: absolute;
    top: -1px;
    left: -1px;
    width: 1px;
    height: 1px;
  }
  table tr td:first-child {
    width: 1px;
  }
</style>



<div class="container shadow p-3 sm-5 bg-white rounded">
  <form method="post" class="needs-validation" action="" enctype="multipart/form-data" id="registerform" target="hiddenFrame">
    <h2>Register</h2>
    <hr />
    <table class="table table-borderless text-nowrap">
      <tbody>
        <tr>
          <td>
            <label for="firstnameid">First Name: </label>
          </td>
          <td>
            <input id="firstnameid" type="text" placeholder="First Name" class="form-control" name="txtfirstname" required />
          </td>
        </tr>

        <tr>
          <td>
            <label for="lastnameid">Last Name: </label>
          </td>
          <td>
            <input id="lastnameid" type="text" placeholder="Last Name" class="form-control" name="txtlastname" required />
          </td>
        </tr>

        <tr>
          <td>
            <label for="emailid">Email: </label>
          </td>
          <td>
            <input id="emailid" type="email" placeholder="Email" class="form-control" name="txtemail" required />
          </td>
        </tr>

        <tr>
          <td>
            <label for="passwordid">Password: </label>
          </td>
          <td>
            <input id="passwordid" type="password" placeholder="Password" class="form-control" name="txtupass" required />
          </td>
        </tr>
      </tbody>
    </table>
    <hr />
    <button type="submit" id="registersubmitbutton" class="btn btn-success" name="btn-register"><i class="fas fa-user-plus"></i> Register</button>
    <br /><br /><br />
    <span id="login_link"> <a href= "login">Login Here</a> </span>

    <hr />


  </form>

  <iframe name="hiddenFrame" class="hiddenFramehideclass"></iframe>
</div>

Good luck!