When resizing the browser, HTML/CSS elements tend to shift positions :(

I've experimented with different position values like absolute, fixed, and static without success.

Wrapping the element in a div didn't yield the desired result, so I'm seeking assistance to correct this. (If that is the solution)

The issue extends beyond just the .table element, but finding a fix for one will hopefully solve all similar problems.

My goal is to keep the elements where I place them or have them shrink slightly if needed.

This particular object is the focal point of my concern regarding positioning.

This being my first experience with html & css, any guidance would be greatly appreciated.

Thank you for your time :)

.table {
  font-family: "Fira Sans", sans-serif;
  border-collapse: collapse;
  overflow-y: scroll;
  height: 520px;
  width: 425px;
  position: relative;
  display: block;
  z-index: 6;
  left: 120rem;
  bottom: 90rem;
  background-color: white;
  border: 4px solid black;
  z-index: 5;
}
<table class="table">
  <thead>
    <tr>
      <th>
        <input type="text" class="search-input" placeholder="Abbreviation">
      </th>
      <th>
        <input type="text" class="search-input" placeholder="Full Name">
      </th>
      <th>
    </tr>
    <tr>
      <td>XXX</td>
      <td>XXX, XXX, XXX</td>
    </tr>
    <tr>
</table>
</div>

htmlcssstylesdisplay

Answer №1

I have taken the liberty of adjusting your HTML code. I included new elements and made changes to your CSS in order to demonstrate how styles can impact each other. The initial .table CSS had too many rules that altered the definition of a table element. Hopefully, my modifications will provide you with some insights.

It would also be beneficial for you to utilize online resources for assistance with HTML and CSS.
MDN is considered THE ultimate source for web development.

ADDENDUM:

The beauty of HTML and CSS lies in their ability to mix and match elements and rules. We have numerous tools at our disposal to customize the appearance of a page. However, this flexibility can also pose challenges.

For what it's worth: Just because we have the capability to embed data collection within a table (in the header or elsewhere) doesn't mean we should.

Yes, it may be permissible. Yes, it may function as intended.

However, it does alter the HTML structure. While this might be technically acceptable and functional, there could be unforeseen issues. For example, using CSS to change display:table to display:block.

Additionally, accessibility concerns must not be overlooked, such as screen readers encountering input fields instead of column headers.

The different parts of an element are meant to work harmoniously together and should only be redefined cautiously. If we find ourselves attempting to make one element behave like another, chances are something was overlooked. 

.outer {
  position: relative;
}

.dontmove {
  position: absolute;
  width: 500px;
}

.table {
  font-family: "Fira Sans", sans-serif;
  border-collapse: collapse;
  background-color: white;
  border: 4px solid black;
  width: 100%
}

.table th,
.table td {
  padding: 2px 6px;
}

.table th>input {
  width: 100%;
}
<div class="outer">
  <div class="dontmove">
    <table class="table">
      <thead>
        <tr>
          <th>
            <input type="text" class="search-input" placeholder="Abbreviation">
          </th>
          <th>
            <input type="text" class="search-input" placeholder="Full Name">
          </th>
          <th>
        </tr>
        <tr>
          <td>XXX</td>
          <td>XXX, XXX, XXX</td>
        </tr>
        <tr>
    </table>
  </div>
</div>

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

"Interactive feature allowing users to edit and view the most recently inserted HTML

My approach involves using a contenteditable div as an input field for entering text and inserting icons through a button that adds small HTML pictures within the text. Everything works fine when the text is narrower than the contenteditable field. Howev ...

jqueryhtmlcsscontenteditable

iOS devices do not support the add/removeClass function

This code functions properly on desktop browsers, but encounters issues when used on iPhones. Furthermore, the script mentioned below seems to be causing problems specifically on iPhone devices. var $event = ($ua.match(/(iPod|iPhone|iPad)/i)) ? "touchstar ...

javascriptjqueryhtmlcssiphone

What are the best ways to stop jQuery events from propagating to ancestor elements?

I have a collection of nested UL's that follow this structure: <ul class="categorySelect" id=""> <li class="selected">Root<span class='catID'>1</span> <ul class="" id=""> <li>First Cat<span ...

javascriptjqueryhtmlcss

Discovering keywords within HTML code and concealing particular content through jQuery

My HTML code snippet is shown below: <div id='p1'> <p>First Paragraph</p> <p>Abbot and Costello - Africa Screams</p> </div> <div id='p2'> <p>Second Paragraph</p> <p>Abbot and ...

jqueryhtml

How can I implement a search box on my HTML website without relying on Google Custom Search?

Greetings to all! I am currently managing a website filled with HTML content. I am looking to incorporate a search box into the site. After researching on Google, most of the results point towards using Google Custom Search. However, I require a search box ...

javascripthtmlcss

The ng-view directive within AngularJS appears to be malfunctioning

I am facing an issue with my simple Angular app. I have two links that are supposed to change the URL and display the correct view within the same single page application. However, when I include the controllers' module in the main module, it stops wo ...

javascripthtmlangularjs

"Toggling a switch alters the appearance following the submission of a form

Recently, I incorporated a switch toggle into my form to help filter products. I followed this guide. However, after submitting the form, the page reloads using ajax and the switch toggles back to its initial style before being toggled again. What could be ...

jqueryhtmlcssruby-on-railsajax

What is the process for retrieving my dates from local storage and displaying them without the time?

Having an event form, I collect information and store it in local storage without using an API. However, I face a challenge when extracting the startdate and enddate out of localstorage and formatting them as dd-mm-yyyy instead of yyyy-mm-ddT00:00:00.000Z. ...

javascriptjqueryhtmlangularjsdate

Is there a way to include two functions within a single ng-click event?

Is it possible to incorporate two functions in a single ng-click event? Below is the code snippet: <button class="cButtonSpeichern" ng-click="saveUser()">Speichern</button> In addition, I would like to include this function as well. alert ...

javascriptangularjshtml

Is there a way to automatically redirect my page after clicking the submit button?

I'm having trouble with the code below. I want it to redirect to NHGSignin.php if 'new horizon gurukul' is entered. When I click the Next button, it's supposed to take me there but it's not working as expected. Can anyone help me f ...

javascripthtmlcss

Enhance your SVG progress circle by simply selecting checkboxes

I have a unique system with 5 checkboxes that act as a To-Do list. When I click on each checkbox, the circle's diameter should progressively fill up in increments of 1/5 until all 5 checkboxes are completed. The order in which the checkboxes are click ...

javascripthtmlcsssvgcheckbox

Connecting radio buttons to data in Vue using render/createElement

How do you connect the value of a selected radio button to a specific variable in the data object within a Vue application when using the render/createElement function? ...

javascripthtmlvue.jsradio-buttonrendering

Tips for adjusting the close date based on the selected date in a dropdown datepicker

Here is a sample code snippet: <input id="date1" name="start_date" id="dpd1"/> <select class="form_line_only form-control" name="ho_night"> <option selected> 0 </option> <option ...

javascriptjqueryhtmldatepicker

- Determine if a div element is already using the Tooltipster plugin

I have been using the Tooltipster plugin from . Is there a way to check if a HTML element already has Tooltipster initialized? I ask because sometimes I need to update the text of the tooltip. To do this, I have to destroy the Tooltipster, change the tit ...

javascriptjqueryhtmlcsstooltipster

Other options besides re-flowing and repainting

After doing some research on various platforms like Stack Overflow, I've come across information stating that re-paints and re-flows can be quite taxing on a browser's resources. I am interested in learning about alternative CSS/JS techniques to ...

javascripthtmlcssrepaintreflow

Making a dropdown menu spin using Jquery and Javascript

I am in need of a unique solution for a dropdown menu that appears rotated 90 degrees anticlockwise. The goal is to have the dropdown select "button" text displayed vertically, with the options sliding out in a similarly rotated, sideways manner featuring ...

javascriptjqueryhtmlcssrotation

Integrating a title field into every p-column with ng-template

I am exploring ng-templates for the first time. I have managed to customize each column to display names accurately, but I am encountering an issue. I would like to incorporate a title field in order to show a tooltip with the full name when hovering over ...

htmlangulartemplatesprimeng

Using Javascript to choose an option from a dropdown menu

const salesRepSelect = document.querySelector('select[name^="salesrep"]'); for (let option of salesRepSelect.options) { if (option.value === 'Bruce Jones') { option.selected = true; break; } } Can someone please ...

javascriptjqueryhtml

Designing a fixed bottom footer enclosed within a wrapper that expands from the top header to the bottom footer

I have created the basic structure of my webpage using HTML / CSS. However, I now realize that I need a sticky footer that remains at the bottom of the screen with a fixed position. Additionally, I want the main content area, known as the "wrapper," to str ...

javascriptjqueryhtmlcss

JavaScript code that moves the active link to the top of the navigation when the window width is less than or equal to 800px

I'm working on a responsive navigation that is fixed at the top and switches from horizontal to vertical when the screen size is less than or equal to 800 pixels wide. However, I'm facing an issue with moving the active link to the top of the na ...

javascripthtmlcssnavigationresponsive