Is there a way to align two spans in a TD table so they both start on the same line?

I need to ensure that the two spans within the table are aligned and start simultaneously Here is an image for better understanding https://i.sstatic.net/8F4aN.png

.btContentHolder table td, .btContentHolder table th {
    /* padding: 10px; */
    counter-increment: step-counter;
    margin-bottom: 10px;
    position: relative;
    padding-left: 2.5714em;
    padding-top: 2em;
    padding-right: .2em;
}
.pli{
    position: absolute;
    left: .3em;
    top: 1.5em;
    z-index: 100;
    content: counter(step-counter);
    background-color: #fff;
    color: #2b6a83;
    font-size: 1.4285em;
    border: solid 1px #2b6a83;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    line-height: 1.2em;
    text-align: center;
}
.pli:hover{
    background-color: #2b6a83;
    color: #fff;
    border: solid 1px #fff;
}
.cli{
    position: absolute;
    left: .3em;
    top: 1.5em;
    z-index: 100;
    content: counter(step-counter);
    background-color: #fff;
    color: #e9736a;
    font-size: 1.4285em;
    border: solid 1px #e9736a;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    line-height: 1.2em;
    text-align: center;
}
.cli:hover{
    background-color: #e9736a;
    color: #fff;
    border: solid 1px #fff;
}
.protd{
        background-color: #2b6a831c;
}
.contd{
        background-color: #ff000024;
}
<h2 style="text-align: center;"><span style="color: #2b6a83; font-family: Krub;">In-Home Care</span></h2>
<table>
<tbody style="padding-bottom: 20px;">
<tr>
<th style="text-align: center; font-weight: 500; color: #ffffff; font-size: 24pt; font-family: Krub; background-color: #2b6a83; padding: 0px;">Pros</th>
<th style="font-weight: 500; font-size: 24pt; font-family: Krub; color: #ffffff; background-color: #e9736a; padding: 0px; text-align: center;">Cons</th>
</tr>
<tr>
<td class="protd"><span class="pli">1</span><span style="font-size: 14pt; font-family: Krub;">One-on-one care tailored to meet unique preferences and needs.</span></td>
<td class="contd"><span class="cli">1</span><span style="font-size: 14pt; font-family: Krub;">When 24/7 care is required, the costs can be very high.</span></td>
</tr>
...

htmlcss

Answer №1

Here is a snippet of code for creating horizontal alignment in tables and styling the content:

.btContentHolder table td,
.btContentHolder table th {
  /* padding: 10px; */
  counter-increment: step-counter;
  margin-bottom: 10px;
  position: relative;
  padding-left: 2.5714em;
  padding-top: 2em;
  padding-right: .2em;
}

.pli {
  position: relative;
  margin-right: 10px;
  z-index: 100;
  content: counter(step-counter);
  background-color: #fff;
  color: #2b6a83;
  font-size: 1.2285em;
  border: solid 1px #2b6a83;
  border-radius: 50%;
  text-align: center;
  padding: 3px 7px;
  display: inline-block;
}

.pli:hover {
  background-color: #2b6a83;
  color: #fff;
  border: solid 1px #fff;
}

.cli {
  position: relative;
  margin-right: 10px;
  z-index: 100;
  content: counter(step-counter);
  background-color: #fff;
  color: #e9736a;
  font-size: 1.4285em;
  border: solid 1px #e9736a;
  border-radius: 50%;
  padding: 3px 7px;
}

.cli:hover {
  background-color: #e9736a;
  color: #fff;
  border: solid 1px #fff;
}

.protd {
  background-color: #2b6a831c;
  padding: 10px;
}

.contd {
  background-color: #ff000024;
  padding: 10px;
}

#table1 .col1 {
  float: left;
  width: 8%;
}

#table1 .col2 {
  float: left;
  width: 92%;
}

#table2 .col1 {
  float: left;
  width: 12%;
}

#table2 .col2 {
  float: left;
  width: 88%;
}
td{
  vertical-align: top;
}
<h2 style="text-align: center;"><span style="color: #2b6a83; font-family: Krub;">In-Home Care</span></h2>
... (additional HTML content) ...

Answer №2

It's better practice to avoid using inline styles in HTML, especially when you have a separate CSS file where you can define all your styles.

I've removed the following styles from .pli and .cli:

position: absolute;
left: .3em;
top: 1.5em;
z-index: 100;

Additionally, I've added &nbsp; to achieve a button-like appearance for the circles. Here's the updated code:

.btContentHolder table td,
.btContentHolder table th {
  counter-increment: step-counter;
  margin-bottom: 10px;
  padding-left: 2.5714em;
  padding-top: 2em;
  padding-right: 0.2em;
}

.pli {
  content: counter(step-counter);
  background-color: #fff;
  color: #2b6a83;
  font-size: 1.4285em;
  border: solid 1px #2b6a83;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  line-height: 1.2em;
  text-align: center;
}

.pli:hover {
  background-color: #2b6a83;
  color: #fff;
  border: solid 1px #fff;
}

.cli {
  content: counter(step-counter);
  background-color: #fff;
  color: #e9736a;
  font-size: 1.4285em;
  border: solid 1px #e9736a;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  line-height: 1.2em;
  text-align: center;
}

.cli:hover {
  background-color: #e9736a;
  color: #fff;
  border: solid 1px #fff;
}

.protd {
  background-color: #2b6a831c;
}

.contd {
  background-color: #ff000024;
}
<div class="col-md-6" style="width: 49%;">
  <h2 style="text-align: center;"><span style="color: #2b6a83; font-family: Krub;">In-Home Care</span></h2>
... (remaining HTML content)
... (remaining HTML content)
</table>

... (remaining HTML content)

EDIT 1:

Based on your requirements, I made the necessary adjustments by introducing a new CSS class named .inlineTable.

.inlineTable {
  display: inline-flex;
}
... (rest of the CSS code)

<div class="inlineTable">
... (updated table structure)
</div>

EDIT 2:

The final changes have been implemented as per your specifications.

.btContentHolder table td,
.btContentHolder table th {
  counter-increment: step-counter;
  ... (remaining CSS properties)
  vertical-align: top;
}
... (rest of the CSS code)

<div class="btContentHolder">
... (final HTML table structure with colspan usage)
</div>

I transformed everything into a table format and utilized the `colspan` attribute effectively.

You may want to refer to the W3Schools documentation on tables for further enlightenment on structuring tables efficiently.

In my opinion, you can enhance your code even more by creating additional classes and moving these inline styles out of the HTML markup.

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

Adjust the height to match the shortest sibling child div height

In my layout, I have multiple rows with each row containing multiple columns. Within each column, there is a div and a paragraph - the div contains an image. My goal is to set the div with the class cover-bg to the lowest height of cover-bg in the same row ...

javascripthtmljquerycss

Unable to close Bootstrap 5 modal

All of my modal forms are functioning properly, except for one that I migrated from Bootstrap 4 to Bootstrap 5. This particular modal refuses to close. Neither the Close button (the X at the top of the popup) nor the Cancel button will close the modal. I ...

javascripthtmltwitter-bootstrapbootstrap-modalbootstrap-5

Incorporating Sass into an HTML document

Recently, I discovered Sass and went through its documentation. I successfully installed the package on my Ubuntu system alongside Ruby and Haml. Now I'm eager to learn how to use it with Wordpress or a basic HTML file. Being new to this, I'm see ...

htmlcsssass

Maintaining a sticky footer that remains visible throughout the content as the screen is resized

For more information, please visit my website at I attempted to implement a "sticky footer" technique following the steps outlined in this tutorial (http://ryanfait.com/sticky-footer/) Unfortunately, the sticky footer does not function properly when resi ...

htmlcss

Ensure the slider functions on all types of browsers

I found a code snippet for an image slider on codepen and integrated it into my project. However, I encountered some issues trying to center the slider in the browser window with 5% space on each side. I attempted using $(window).width(); to set the width ...

jqueryhtmlcssslideshowtransition

What are some ways to enable text highlighting when it is disabled?

I've encountered an issue with text highlighting in my asp.net web application when using the latest versions of FireFox and Google Chrome. Strangely, pressing CTRL+A also does not work for all input fields. I haven't had the opportunity to test ...

csscross-browserhighlighttextselection

Chrome on IOS: Experiencing screen freezing while scrolling

1) I'm working with Material UI in React JS. I have added a simple scrollable code, but when I reach the bottom of the screen/scroll, it freezes. 2) I also tried it with a simple HTML page and it worked correctly. <div style={{ ...

javascripthtmlcssreactjsmaterial-ui

I'll show you how to implement custom fonts in TailwindCSS and NuxtJS!

Currently, I am in the process of developing a website using NuxtJS along with Tailwind CSS for styling. To incorporate my desired fonts, I have utilized the @nuxtjs/tailwindcss module. Despite applying the correct font-family through CSS, it seems that m ...

cssvue.jsfontstailwind-cssnuxtjs

What is the best way to align my header buttons in the center and move items to the far right of my toolbar?

My header currently displays as follows: https://i.sstatic.net/h8zDQ.png I am aiming to center the [LEARN MORE, ABOUT, RESOURCES, CONTACT] buttons in the middle of the navbar and align the profile icon and switch button to the far right of the page! I en ...

javascriptcssreactjsmaterial-ui

Ways to incorporate gradual transparency to an element using HTML and CSS

I have a list item that I want to visually disappear into the horizon during a JavaScript event. I am not looking to animate it, more like applying a filter effect. Is there a way in HTML/CSS/JavaScript to dynamically add gradual transparency without chang ...

javascriptjqueryhtmlcss

What is the best way to implement media queries for mobile phones and desktop computers?

I've come across similar questions before but still can't wrap my head around it. Here's my dilemma: I want the index page of my website to display in desktop layout on desktops and mobile jquery on mobile devices. Currently, I have set up m ...

javascriptjquerycssjquery-mobile

What is the best method for positioning two forms in a vertical arrangement?

I'm looking to integrate a Login form in HTML within my C# project. Here's what I have so far: However, as you can see, the layout is not very aesthetically pleasing. I'm struggling to align the elements in a more visually appealing way. My ...

c#htmlcss

Access and expand a bootstrap accordion with a hyperlink

Here is a concept I want to make happen: For my project, I am utilizing Bootstrap v3.4.1 and have set up two columns next to each other. My goal is to link the elements in the hotspot banner (left column) to trigger and open the corresponding Accordions ( ...

htmlcssaccordion

Basic illustration of AJAX web-app, encompassing client and server components

Currently, I am immersing myself in the world of AJAX by tapping into online resources and delving into some informative books. While doing so, I discovered that AJAX is not exactly a groundbreaking technology in and of itself, but rather a method of lever ...

javascripthtmlajax

Position this menu in the top left corner using HTML and CSS

Is there a way to position the vertical menu completely in the top-left corner without any margin? I've set all margins to 0 but there is still about 2px of space. Any ideas on how to fix this? Thank you in advance! ...

htmlcss

When the mouse leaves, the input search will automatically change the text color to black

I'm having trouble developing a search input, as I am facing an issue and unable to find a solution. Currently, the search input is working fine; when I click on it, it expands. However, once expanded and I start typing, the text color turns white wh ...

htmlcss

Confused by navigating with php

I've been attempting to convert this link into a PHP foreach loop without any success, and I'm new to Stack Overflow. I've used an array to generate the code, but I am uncertain of how to transform this code into a foreach loop. <ul class ...

phphtmlcss

Creating a Foldable Footer Inside a Card (Bootstrap)

I successfully created three blocks using the CARD class in bootstrap. Now, I am seeking to add a footer or a div to each card that allows for toggling "Show/Hide Details". Despite attempting 10 different methods, the cards keep breaking for some reason w ...

htmlcsstwitter-bootstrapbootstrap-4flexbox

The HtmlHelper ActionLink consistently establishes the current controller instead of allowing for the specification of another controller

I have been utilizing the HtmlHelper class to incorporate some code into my layout Navbar as a menu. Here is the code snippet: public static MvcHtmlString MenuLink(this HtmlHelper helper,string text, string action, string controller) { ...

htmlbootstrap-4asp.net-mvc-5

JavaScript error message stating that the setAttribute function is null

As a newcomer to JS, I am currently working on creating a task list webpage that allows users to submit projects and create task lists within each project with designated due dates. In order to generate unique ID tags for projects and tasks, I utilized UU ...

javascripthtmlnpmwebpack