What is the best way to adjust the positioning of elements within a td element?

I am dealing with a page that contains multiple sub-tables nested inside a larger table, dividing the entire page into two sections. My query is regarding the repositioning of all elements within the td tags to enhance the visual appearance. The current result can be seen here:

View the current layout without any position formatting

The desired look should resemble this:

See how it's supposed to appear

I attempted to achieve this using CSS and relative positioning like so:

.leftSide
{
    position: relative;
    bottom: 250px;
}

While this solution worked well initially, issues arose when zooming in or out on the page, causing elements to become disorganized. How can I prevent this from happening? Find my complete code below:

(CSS styles omitted for brevity)
<table class="splitTable">
  <tr>
    <td class="sides">
      <div class="leftSide">
        <span class="chooseText">Choose</span>
        <table class="SSRSSObjectCostTableTest" width="25%">
          <tr>
            <td class="sideForSSRSSTables">Say this is 1st element</td>
            <td class="sideForSSRSSTables">Say this is 2nd element</td>
          </tr>
        </table>
      </div>
    </td>

    <td class="sides">
      <div class="rightSide">
        <span class="partsText">Parts</span>
        <button type="button" class="addButton">+Add Part</button>

        <table class="partsTable">
          <td class="sideForPartsTable" width="5%">Expand button</td>
          <td class="sideForPartsTable">Title + sum1 + sum2</td>
          <td class="sideForPartsTable" width="5%">edit</td>
          <td class="sideForPartsTable" width="5%">remove</td>

        </table>
        
      </div>
    </td>

  </tr>
</table>

htmlcsshtml-table

Answer №1

Hopefully, this information proves to be helpful :)

.splitTable {
  width: 100%;
  height: 100vh;
  border: 6px solid #05788D;
  border-collapse: collapse;
}

.sides {
  border: 6px solid #05788D;
  position: relative;
  width: 50%;
}


.sideForSSRSSTables {
  border: 3px solid #05788D;
}

.partsTable {
  height: 7%;
  width: 95%;
  margin-top:30px;
  border-collapse: collapse;
}

.sideForPartsTable {
  border: 3px solid #05788D;
}

.leftSide {
  display: flex;
  flex-direction:flex-end;
  position: absolute;
  top: 20px;
  width:90%;
  left:50%;
  transform:translateX(-50%);
}

.leftSide>* {
  flex: 1;
}

.SSRSSObjectCostTableTest {
  border: 3px solid #05788D;
  margin: 5px;
  border-collapse: collapse;
}


.rightSide {
  position: absolute;
  top: 20px;
  left:50%;
  transform:translateX(-50%);
  width:90%;
}

.addButton {
  float:right;
  margin-right:5%;
}
<table class="splitTable">
  <tr>
    <td class="sides">
      <div class="leftSide">
        <span class="chooseText">Select</span>
        <table class="SSRSSObjectCostTableTest">
          <tr>
            <td class="sideForSSRSSTables">This could be the first option</td>
            <td class="sideForSSRSSTables">Alternatively, this might be the second choice</td>
          </tr>
        </table>
      </div>
    </td>

    <td class="sides">
      <div class="rightSide">
        <span class="partsText">Components</span>
        <button type="button" class="addButton">+Add Component</button>

        <table class="partsTable">
          <td class="sideForPartsTable" width="5%">Expand</td>
          <td class="sideForPartsTable">Item Title + subitem1 + subitem2</td>
          <td class="sideForPartsTable" width="5%">modify</td>
          <td class="sideForPartsTable" width="5%">delete</td>

        </table>
        
      </div>
    </td>

  </tr>
</table>

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

Initiate Bootstrap 4 dropdown menus from the initial menu point

I need the dropdown menus to align with the position of the first dropdown. There are multiple dropdowns on the page. Check out the screenshot for reference. JSFiddel: https://jsfiddle.net/kfh9Lbep/ https://i.sstatic.net/hHAKz.png Any ideas on how to ac ...

jquerytwitter-bootstrapcssbootstrap-4

Encountering a reference error during the gatsby build process

My project was functioning well as usual until I attempted to run 'gatsby build' and encountered the following error message: ReferenceError: Cannot access '_404' before initialization as well as ReferenceError: Cannot access '_ ...

htmlcssreactjswebpackgatsby

Creating a SASS rule for targeting an element only if its parent does not have a specific classname can be achieved by using the '&' symbol in

Before anything else, I want to express my apologies if a similar query has been raised previously. Unfortunately, finding such specific cases can be quite challenging. My objective is to style every "a" element, excluding those enclosed within h1, h2, h3 ...

htmlcsssassparent

Checkbox does not appear in Internet Explorer

I'm sorry, but I have never encountered this issue before. It seems that my checkboxes are not showing up in Internet Explorer but they do in Firefox. I am unsure why this is happening as I don't know of another way to create checkboxes. &l ...

html

Issue in Firefox: Footer is wrapping around the main content

Hey, I've been dealing with a pesky bug that just won't go away. We're currently working on a redesign for www.petpoint.com - The footer looks perfectly fine in every browser except for Firefox. It gets all jumbled up for some reason. I&a ...

jqueryhtmlcssfirefox

AngularJS directive does not trigger when switching tabs or scrolling pages

I came across a solution to display a placeholder image before the real image fully loads while browsing online here. I implemented the code provided in the accepted answer on my page, where I have two tabs using `ion-slide-box` for tab selection. Each tab ...

javascripthtmlangularjs

Issue with integrating Bootstrap into Angular 2

When attempting to link to the bootstrap.css file located in the node_modules folder within index.html, I encountered an error. The application's folder structure is as follows: ecommerce-app/node_modules ecommerce-app/src/app/index.html All attem ...

htmltwitter-bootstrapangular

Ways to Turn Off CSS Vertical Menu Flyout Animation

I'm new to HTML Lists and trying to figure out how to disable the "Hover flyout effect" so that all sub items are listed vertically below the main item while remaining visible. Can someone please help me understand which specific CSS properties can be ...

htmlcss

Show images dynamically with the help of Flask

Imagine having a camera that can capture real-time images and save them to a folder named "./static". The goal is to showcase each processed image on a local web page using Flask in Python. This means that the system user will be able to view the results ...

pythonhtmlflaskweb

Problem with overlapping content and navigation side bar in Bootstrap 4

Working on a project for my university, I utilized Bootstrap-4 to create various divisions - header, content-top-fat, content-bot-fat, and main-content. I aimed to fix the positioning of the header, content sections, and footer while allowing only the main ...

csstwitter-bootstrapbootstrap-4

The table header row mysteriously vanished after implementing the "stacked" property

A few days back, all of my <b-table> elements that were utilizing the stacked="md" property suddenly had the headers row disappear. Removing the property brings back the headers row, but I really need this property for responsive stacking on smaller ...

htmlvue.jsbootstrap-vue

React default class name ... Before conditional operator takes effect

import './App.css' import {Button} from "antd" <Button shape="round" className={ istrue === "itstrue" ? "trueclass" : "trueclass active" } > TEXT </Button> ...

javascriptcssreactjsantd

Tips on how to ensure the navigation menu is the same size as its child elements in the navigation menu

I'm currently designing a navigation menu that includes a child navigation menu. My goal is to have the size of the main navigation menu match that of the child navigation menu. To achieve this, I've created three hyperlink tags followed by a di ...

htmlcss

Are there any specific requirements or preferences for using .0 in em?

I'm struggling to find a concrete solution. In a nutshell, would it be more appropriate to utilize font-size: 2.0em; or font-size: 2em;? ...

cssfont-size

Display the chosen date from the datepicker in the input field

Utilizing a JQuery DatePicker to be constantly displayed, I have assigned it to a div. Despite wanting it to display the selected date in the input box like in this example, it just isn't functioning as desired for me. Is there a way to have the selec ...

javascriptjqueryhtmldatepicker

Ways to execute a function upon form submission

On my HTML page, I have a section dedicated to receiving a threshold value and calling a function with that value. <form id="distance_input" onSubmit="return false;" > <p>Enter a threshold</p> <div class="col-md-8" style=" ...

javascriptjqueryhtmlforms

Adjust the size of a div using absolute positioning

Can a div with absolute position be resized? I need this pink modal to maintain the same width as the input and resize accordingly. This modal will be utilized in a dropdown component, so it should resize along with the input. Moreover, is using absolute ...

csscss-grid

Why does jQuery only load once the loading process has been completed?

I want to enhance user experience by adding a blue rectangle with a :focus class when a product is clicked on before the next page loads. To achieve this, I implemented jQuery functionality that changes the class of the clicked product and adds a new clas ...

javascriptjqueryhtmlcss

Update the message displayed in MUI DataTables when there are no matching records found

Whenever the data array in my MUIDataTable is empty, a default message pops up stating: "Sorry, no matching records found". I'm looking to personalize this message and input my own text. Any assistance would be greatly appreciated. ...

cssreactjsmaterial-uimui-datatable

Creating a carousel similar to the one on Skipperlimited's website can be achieved

I am working on a project and I would like to create a design similar to the one found at Specifically, I am interested in replicating the carousel of images and the rotating carousel within their logo. Can anyone provide guidance or suggestions on how to ...

jqueryhtmlcssbootstrap-4