Issue with text-nowrap not functioning as intended within Bootstrap 4.5 table cells

Is there a way to eliminate the space between two columns in my layout? I want to get rid of the highlighted space below.

I attempted using text-nowrap, but it didn't achieve the desired result.

<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

According to this response, one simple way to eliminate extra whitespace in table cells is by setting a small width, such as 1px, for the first column, as table cells expand to fit their content.

Here's an example of your revised code:

<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>

Best of luck!

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

Attempting to create a dynamic grid layout utilizing CSS to ensure optimal responsiveness

I am working on creating a webpage layout similar to the one in the link below: The maximum width for the layout is set to 1600px. However, I am facing challenges in making it fully responsive. This is because all the boxes are given widths in percentages ...

Restore radio input functionality with a transparent method

I've experimented with various methods, including traditional form reset techniques and jQuery solutions from different sources on the internet without success. Snapshot: The Objective: I am working on a sortable list where users are required to ra ...

Unique CSS specifically designed for consecutive elements listed in succession

I have a list of notes in a document, but occasionally I may include some document updates (such as "Document closed", "Revision made"...). Here is the basic HTML structure of a document and its notes: <p class="document-note">My note</p> < ...

What steps can I take to design a functional hamburger menu?

After multiple attempts to create a hamburger menu, I have hit a roadblock. Clicking on the menu icon transforms it into an 'X', but unfortunately, it does not trigger the opening of the menu. Despite days of effort and research, I have yet to fi ...

Investigate the CSS display property of an element using JavaScript

Can JavaScript be used to determine if an element's CSS display == block or none? ...

Why is the Border Radius hiding the corners of my image?

I've never experienced this issue before, but no matter how much padding I add to the picture, the edges are still slightly covered up. Here is an example image (notice that it doesn't happen for every icon - the third one has a normal round back ...

Make the navigation bar stay at the top of the page when scrolling past another element with a top position of 100vh

Trying to explain a unique concept here. I want a nav bar fixed in the position of top:100vh, so that as I scroll down and reach the next section, the navbar sticks at the top rather than staying stuck at the beginning with position:fixed top:0. The aim is ...

Tips for effectively placing a page scope block using BEM

Here is the current structure of my header. The page component is assumed to be the root. Currently, the geometry of the social-links block is being controlled by the header__social-links mix (positioned absolutely relative to the header). How can I prop ...

Issue with Table Content Being Truncated After Conversion from HTML to MS Word 2003

I am experiencing an issue where the table content is being cut off on the right side of the page when converting from an HTML page into MS Word 2003. Below is a sample HTML code (where placeholder $CLOB_DATA will be replaced by large CLOB data): <html ...

Guide to incorporating the content of a div into an image source using PHP

In extracting a value from an HTML table, I encountered this syntax: $('table#showalluporders tbody tr').click(function() { var tableData = $(this).closest("tr").children("td").map(function() { return $(this).text(); }).get(); $(' ...

adjusting label widths using jQuery mobile

I am currently using jQuery mobile to develop my user interface, however I am facing an issue with adjusting the width of my labels. Can anyone provide guidance on how to set the width of all my labels to 108px? http://jsfiddle.net/GZaqz/ Check out the c ...

Ruby Thin Server: An Unexpected ActionView Template Error

Encountering an issue when trying to deploy my project on Amazon Web Services and accessing the domain. ActionView::Template::Error (Command 'java -jar /home/ubuntu/.rvm/gems/ruby-2.1.10@silk/gems/yui-compressor-0.12.0/lib/yui/../yuicompressor-2.4.8 ...

Embedding the @media tag directly into a class for simplification and to eliminate redundancy

For the complete css/html code sample, please visit: https://jsfiddle.net/menelaosbgr/jbnsd9hc/1/ Here are two specific definitions I am working with: /* Dropdown Content (Hidden by Default) */ .dropdown-content { display: none; position: absolut ...

How can I make a Bootstrap 5 container adjust to the height of the screen?

I am currently working with Bootstrap 5 and facing an issue while displaying a calendar on the screen. The height of the container appears to be around 25% longer than the screen height. I have tried setting the height to "100%" and "80%" in the CSS, but i ...

In Firefox, the focus outline is not shown on a div that has a mask-image CSS rule applied to

In my code, I have multiple div elements that have the mask-image and -webkit-mask-image CSS rules applied to them. These divs are being used as UI slider components, so I want keyboard users to be able to tab between them and use the arrow keys to adjust ...

Utilizing bootstrap for a responsive design that includes max-height constraints and horizontal

Seeking to modify the appearance of my Angular Template by incorporating Bootstrap and a custom CSS file. <!-- index.html --> <div static-include="partial/example.html"></div> The static-include directive, sourced from Stack Overflow, p ...

Utilizing JavaFX 2 with a touch of CSS styling

Currently, I am practicing JavaFX 2.0 and working on creating an XYChart with 2 line series while also customizing colors, strokes, etc. through a CSS file. In order to guide me through this process, I decided to refer to the following link: http://docs. ...

Each column has its own scroll bar, making use of 100% of the available space within a container that is 100%

I am attempting to create 3 columns, each with its own scroll bar, while also taking up 100% of the available space. However, I am facing issues where there is either no scroll bar present or the columns are not occupying 100% of the available space. It ...

Steps for choosing a dropdown menu item specified under the <span> tag using Selenium WebDriver and C#

<div class="span3"> <div> LSP Account<br> <span title="" class="k-widget k-dropdown k-header" unselectable="on" role="listbox" aria-haspopup="true" aria-expanded="false" tabind ...

What is the functionality of the icon `<i>` in Twitter Bootstrap?

After adding an icon to a webpage, I noticed that it replaced the old, semi-deprecated <i> tag and instead used a customized image tag. It almost seems like <i ...> is just a simpler version of <img ...>. I'm curious about how this ...