Having difficulty aligning buttons next to each other in a table row

I've been struggling to align the two key buttons next to each other, but instead, the second button keeps moving to the next line.

I've spent a few days trying different approaches like using display: inline and float: right, but so far nothing has worked. Can someone help me find a solution to this problem? I've provided a link to a JSFiddle with my HTML and CSS.

[Check out the code here][1]

<th colspan="4">Header</th>
            </tr>
            <tr>
                <td>Twinkle STARS


                    <button class="key-button">#### ####</button> 
                    <button class="key-button2">#### ####</button> 


                </td> 

  [1]: https://jsfiddle.net/1nzr3yjf/
htmlcssbutton

Answer №1

Make your buttons narrower. Use the CSS rule width: 100px; for buttons with classes .key-button and .key-button2

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

Alter caret appearance in Bootstrap 4 when dropdown is clicked

Struggling with Bootstrap 4, I aim to craft a dropdown including a caret that points right by default. Upon clicking the dropdown, the caret direction should switch to pointing down. I discovered a method to achieve this /*For complete code details, plea ...

htmlcssangularbootstrap-4

Table design variation for desktop and mobile display

I'm new to this location and could really use some assistance. I'm trying to create a page that can be viewed on both desktop and mobile devices, featuring a table. On desktop, the table displays as follows: th1 th2 th3 td1-1 ...

htmlcssmobiletablelayout

Help needed with using Regex to restrict the number of alphabetical characters allowed

Struggling with configuring RegEx's. Seeking guidance to create a RegEx with the following criteria: Only allow numbers (0-9) Allow a period (.), negative sign (-), plus sign (+), dollar sign ($), and comma (,) Do not permit any alphabetic characte ...

javascripthtmlregexvisual-studio

How can I keep the cursor from automatically moving to the beginning of an input field when the type changes?

Currently in the process of creating a Password field that allows users to hide or display their password in React/Ionic. I am aiming to maintain focus on the password field when switching the input type, similar to how it is done on the PayPal Login page ...

javascripthtmlcssreactjsforms

Position 2 identical classes side by side on the horizontal axis

Currently enrolled in the MIMO HTML course and facing a challenge where I am unable to align both elements with the class="column" attribute horizontally using display: inline-block; I have attempted using float:right and other CSS properties to achieve a ...

htmlcssclass

Trouble with Z-index on Safari and Chrome for iOS

Struggling with a responsive dropdown menu problem, specifically on the Wordpress Underscores theme. The menu appears fine on desktop but is acting up on iOS Safari for both iPad and iPhone users. https://i.sstatic.net/2vx5P.jpg Even attempted adding z- ...

ioscsshtml

Use HTML5 and CSS3 to align text in the center of the page below the header

I am currently in the process of transitioning from using old HTML tables for styling to utilizing HTML5 with CSS. However, I am encountering some difficulties: Check out my Codepen Demo The issue I am facing is that the text aligns itself to the edge of ...

htmlcss

Is the `document.documentElement` consistently defined and always representing the HTML element?

I am looking to make changes to the <html> element using a script within the <head> section of an HTML page. My goal is to only access and modify the <html> element itself, without affecting any of its children. Should I wait for the DOM ...

javascripthtmldom

Modifying SAS ODS contentitem in PROC SQL SELECT query

When using SAS to generate ODS output in HTML format, you have the option to include a table of contents with the "CONTENTS" and "FRAME" settings: ODS HTML PATH="C:\Path\" (url=none) BODY="body.html" CONTENTS="contents.html" ...

htmlsqlsas

Incorporating a full-height website into another website for seamless integration

I'm attempting to embed a website within another website using an Iframe. I've successfully loaded the page, but now I need the embedded site to adjust its height according to the actual content on that site, not just the height of the container ...

jqueryhtmlcss

Text aligned at the center of the Y and X axis

I am looking to center my content along the Y axis instead of only on the X axis. To prevent the page from expanding beyond its current size, I have applied the following CSS: html { overflow-y: hidden; overflow-x: hidden } What I want to achieve is havi ...

javascriptjqueryhtmlcss

Hidden Document Scroll Offset

When CSS is used to hide scrollbar html, body { width: 100%; overflow-x: hidden } The above code snippet removes the scroll from the window but triggers it on the body element. To calculate the scroll values in such cases, you can use: pageOffset = ...

javascriptcssdom

To create space between the input field and button, utilize the input-group class for

Is there a way to insert a space between the input field and the button while using input-group in Bootstrap 3? Check out this jsFiddle for more information. <div class="container"> <div class="row"> <div class="col-md-12"> ...

csstwitter-bootstrap

A method of submitting by simply pressing the enter key alongside clicking on a Bootstrap button

Here is the HTML code I am using to input prompts into a chatbot: <div class="input-group mb-3"> <input type="text" class="form-control" id="chat-input"> <div class="input-group-append ...

javascripthtmlbootstrap-5

What is the best way to insert a page break only when necessary?

My code includes multiple dynamic tables within a div element: <div> <table> <tr></tr> <tr></tr> ... </table> <table> <tr></tr> <tr>< ...

javascriptjqueryhtmlcsshtml-table

Issues arise with Ajax/PHP not displaying subsequent posts after the initial one

Need help with a settings page for users? One issue I'm encountering is that after submitting the form once and receiving an error message like "Please fill in all fields," subsequent submissions do not display any additional errors or success message ...

phphtmlajaxecho

Relocate the number of records displayed per page next to the pagination controls in datatables

Currently, I am utilizing datatables to create tables effectively using their provided example. However, I am encountering difficulty in moving the "records per page" element, which is contained within a "span6" class of bootstrap. I understand that this ...

javascripthtmlcssdatatable

Retrieving text content from an HTML element with Jsoup for web page manipulation

My task involves extracting text content from a specific HTML element <span class="adr" style="float: none !important;"> <span class="street-address" style="float: none !important;">18, Jawaharlal Nehru Road, </span> ...

htmlhtml-parsingjsoup

The HTML table is displaying with an offset, which is probably caused by the *ngFor directive

I'm having trouble aligning the HTML table properly, as it seems to be misaligned. The issue I am facing is related to the inner loop (modification) which is a list inside of Revision (basically, Revision 'has a' modification list). Althoug ...

htmlangulartypescript

Changing the main domain of links with a specific class attribute during an onmousedown event - is it possible?

We are facing a situation where we have numerous webpages on our blog that contain links from one domain (domain1.com) to another domain (domain2.com). In order to avoid manual changes, we are attempting to achieve this without altering the link (href). Th ...

javascripthtml