Is there a way to adjust the alignment of elements within an HTML Table? I specifically want the Submit button to be placed on the right side without any extra space on the left side

While constructing an HTML table for my Wix site, I've encountered some formatting issues. The left side of the table has excessive spacing, and I can't seem to position the submit button correctly next to the input boxes. Additionally, I'm struggling to change the background color of the input boxes to '#3A3B3F'. I've tried various solutions, but nothing seems to work. If anyone can offer assistance with this problem, I would greatly appreciate it! Below is a snippet of the table's code and a screenshot showing its current appearance: View Table Screenshot

<style>
    #crmWebToEntityForm tr , #crmWebToEntityForm td { 
        padding:6px;
        border-spacing:0px;
        border-width:0px;
        }
</style>
<table style='width:600px;background-color:#3A3B3F;'><tr>
<td  colspan='2' align='left' style='color:#ffffff;font-family:Avenir;font-size:18px;'><strong></strong></td>
</tr> <br></br>
  <tr><td  style='text-align:left;font-size:16px;width:30%;'><span style='color:red;'></span></td>
  <td style='width:40%'><input type='text' placeholder="First Name" style='width:200%' maxlength='0' name='FirstName' /></td>
    <td style='width:350px;'></td></tr>
    ....
    ....

    <button id="formssubmit">SUBMIT QUERY</button><style type="text/css" type="submit">

#formssubmit { 
 background-color: #ffffff;
 padding: .5em;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 6px;
 color: #ddddd;
 font-family: 'Avenir';
 font-size: 20px;
 text-decoration: none;
 border:color:#ffffff;
}

#formssubmit:hover {
 border: none;
 background: #9799A4;
 box-shadow: 0px 0px 1px #ffffff;
}

Answer №1

Upon reviewing, it appears that there is a lot happening in your layout. It seems unnecessary to have 3 columns in each row. Consider removing the first and last columns since they appear empty while the input is in the second td:

You might want to rearrange the table divisions like this:

<td style="word-break: break-word;text-align:left;font-size:16px;font-family:Avenir;font:Avenir;width:30%;"><span style="color:red;"></span></td>

<td style="width:350px; height="50px"></td>

Then customize the styling of the td with your input by adjusting properties such as padding or width.

For setting background colors of input boxes using inline styles, simply do:

<input style="width:200%;height:50; background:#3A3B3F;">

Regarding button positioning: with fewer table divisions, it's easier to position your button on the right. You can use the following CSS for your form-submit button:

#formssubmit {
  float: right;
  margin-right: 10px;
  margin-bottom: 10px;
}

This will place the button on the right with some margin.

Does this guidance help in reshaping your form closer to your desired layout?

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

Struggling to eliminate HTML tags from a string containing the 'aspNetHidden' CSS class

I have a web user control that is being compiled into HTML. The issue I am facing is that the HTML is returning with view states enclosed in DIVs with a class of aspNetHidden. These DIVs are causing problems with my page's design, so I am attempting t ...

Mixing box-shadow and blur filters can result in unusual artifacts appearing in Webkit browsers

Recently, I encountered an intriguing and frustrating bug in WebKit browsers. Consider a scenario where there is a parent DIV (let's say .wrapper) and a child DIV (.main). You apply a box-shadow on the .main DIV and a blur filter on the .wrapper DIV. ...

The "Read more" button is displaying inaccurate data

I have a problem with the read more buttons under my testimonials on the page. The left button is working correctly, but the right button is displaying text from the wrong testimonial. I'm not sure why this is happening as there are no console error ...

Position the div to float on the right side and then have it drop below on smaller screens

I'm currently working on implementing a design effect similar to the one shown below: on my website (), but I'm struggling with getting the HTML and CSS just right. When I move the map to float up on the right side, it doesn't drop below th ...

Selenium xpath string comparisons are unsuccessful despite the strings being identical

In my framework, I am using a combination of keyword-driven and data-driven approaches. The expected strings are retrieved from an Excel sheet while the actual strings are taken from the webpage. Interestingly, even when both variables print the exact same ...

Ways of incorporating text in a parallelogram shape

Here is the HTML code with ID attributes applied to both divs: <div id="herotext"> <div id="banner"></div> <h1 id="maintitle">Hey, I'm Charlie</h1> <p>This websi ...

Tips for inserting active class on the main menu and adding an active class along with an icon on the sidebar menu

I am working on a website where I want to add the active class only when a user clicks on the top menu. However, if the user chooses something from the sidebar menu, I also want to add an icon arrow next to it. Any ideas on how I can achieve this? Check o ...

Troubleshooting a CSS problem within mat-autocomplete component in Angular 7

While using mat-autocomplete, I noticed that when I select an option from the dropdown and then scroll through the main bar, the dropdown menu does not move along with the autocomplete input field. view image here Here is the code snippet: <td width ...

Why do my checkboxes refuse to respond separately?

I am currently experiencing an issue with the checkboxes in my JavaScript game. They do not respond to individual clicks as expected. Each time I log the output, I receive index 0 regardless of which box I click on. The checkboxes seem unresponsive but the ...

Get Python CSV file with Callback feature

When trying to download a CSV file from Morningstar by clicking on a button link, the presence of a callback in the URL seems to be hindering the download process. Even when pasting the URL (http://financials.morningstar.com/finan/ajax/exportKR2CSV.html?&a ...

How can I use Moment.js to show a custom message based on the current day of the week?

Currently, I am utilizing Moment.js to dynamically showcase various messages based on the day of the week. For instance, if it's: If it's Monday, I want it to display "It's Monday!" If it's Tuesday, I'd like it to show "Happy Tu ...

Linking from one page to another page within a specific region

After setting up a master header on my page, I found myself struggling to navigate from the second page back to the 'index' in order to reach a specific region known as #about. <a runat="server" href="~Index.aspx" class="smoothScroll"> ...

Issues with redirection to registration page in PHP Slim framework

When I access localhost/path/home, it takes me to the homepage where I can either login or signup. Clicking on either option should redirect me to localhost/path/login or localhost/path/signup respectively for the login or signup page. However, there seem ...

Using -webkit-hyphens: auto in Safari does not function properly when the width is set to auto

I have a situation with an h3 element where I am unsure of its width. As a result, the width is set to auto by default. However, I need the text inside this element to have hyphenation applied to it. This h3 element is within a flex container along with an ...

Header reference differs from the document referrer

this is the request header: GET / HTTP/1.1 Host: localhost:3002 Connection: keep-alive sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="96", "Google Chrome";v="96" sec-ch-ua-mobile: ?0 User-Agent: ...

Transmit data from Raspberry Pi to Apache Server with strong security measures

Utilizing a Raspberry Pi to collect temperature data and store it in a file Running on a virtual machine, the server uses Apache to host a website (comprised of HTML, PHP, and JavaScript) displaying a graph based on this data I am seeking a secure method ...

Display or conceal headers depending on the corresponding homepage using Vue.js

I currently have a header-one that appears on all pages by default. Additionally, there are header-two and header-three which only appear when their respective home pages are visited. Is there a way to conditionally show header-v1 if the path is '/hom ...

Ways to retrieve targeted keyframes using JavaScript

Trying to access a scoped "keyframes" named move-left in JavaScript. How can I do this while keeping it scoped? Note that vue-loader will add a random hash to move-left, such as move-left-xxxxxxxxx. <template> <div :style="{animation: animati ...

How to Condense an Element Using Position: Absolute

https://i.sstatic.net/GMUss.png I'm attempting to create functionality where the "Open Chat" button displays an Absolute positioned div, then hides it when clicked again. I experimented with using the react-collapse component, but encountered issues ...

Content within the Iframe is in the process of loading, followed by

Exploring the code below: <iframe id="myframe" src="..."></iframe> <script> document.getElementById('myframe').onload = function() { alert('myframe is loaded'); }; </script> Is it a possibility that the ifra ...