Aligning CSS tables vertically poses a challenge for me

Although I usually prefer HTML tables for their ease and speed, I am attempting to follow best practices and use CSS tables instead.

A new issue has arisen...

I am working on an HTML page with tabular data in CSS format, containing 3-4 pieces of data across multiple rows.

The challenge is aligning Data 4 of Row 1 vertically with Data 4 of Row 2 - a seemingly simple task.

However, upon setting the border to 1px and seeing the columns displayed, it becomes apparent that they are not perfectly aligned.

In Row 2, Data 1 lines up with Data 1 from the previous row. Yet, it also extends halfway below Data 2 of Row 2, while Data 2 falls directly below Data 2 and 3 of the prior row.

Could there be a missing piece of CSS code?

CSS guidelines:

.table { display: table; border: 1px solid black; }
.row { display: table-row; border: 1px solid black; }
.cell { display: table-cell; border: 1px solid black; }

HTML setup:

<div id="table" style="width=100%; margin: auto;">
    <div class="row">
        <span class="cell" style="float:left; padding: 10px;"><a href='/view/2'> Kitten Inn</a></span>
        <span class="cell" style="float:left; padding: 10px;"> Wellington</span>
    </div>
    <div class="row">
        <span class="cell" style="float:left; padding: 10px;"><a href='/view/1'> Kiwi Birdlife Park</a></span>
        <span class="cell" style="float:left; padding: 10px;"> Otago</span>
    </div>
</div>

Website URL:

htmlcsscss-tables

Answer №1

Removing the 'float: left' style will resolve the table formatting issue you are experiencing.

Check out this link for reference.

.table {
  display: table;
  border: 1px solid black;
}
.row {
  display: table-row;
  border: 1px solid black;
}
.cell {
  display: table-cell;
  border: 1px solid black;
}
<div id="table" style=" width=100%; margin: auto;">
  <div class="row">
    <span class="cell" style="padding: 10px;"><a href='/view/2'>  Kitten Inn</a></span>
    <span class="cell" style="padding: 10px;"> Wellington</span>
  </div>
  <div class="row">
    <span class="cell" style="padding: 10px;"><a href='/view/1'>  Kiwi Birdlife Park</a></span>
    <span class="cell" style="padding: 10px;"> Otago</span>
  </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

Trouble with Pre-populating Form Select Elements in React - Auto-populate Feature Failing to Work

With my working React ReduxForm component, I'm struggling to pre-populate a Select input in the form while still allowing it to be changeable. Despite searching through documentation and forum posts, I haven't found a solution yet. It seems like ...

javascripthtmlreactjshtml-selectredux-form

What steps should I take to ensure that the getElementsbyName function works properly on both Internet Explorer and Firefox browsers

Encountering a JavaScript error in IE but not in FF ("document.getelementsbyname(...).0.innerhtml is null or not an object": var oldVal = parseInt(document.getElementsByName("outSL")[0].innerHTML); //value pulled from the database Here is the asp.net c ...

javascriptasp.nethtmlinternet-explorerdom

Making rapid formatting changes by rearranging the positioning of words in Javascript

Struggling to untangle my complex code, I'm unable to make the necessary adjustments. Here's what I have: var stocks= [ ["Beef (80/20) raw","oz",115.4451262,3.293742347,72,"4.85 gallons","5.65 pounds","0 - ",2.142,19,20,"0.0001275510204"," ...

javascriptjqueryhtmlcss

Unable to choose a child div using jQuery

<div class='class1'> <div class='class2'> <div class='class3'> some unique text </div> <div class='class5'> more unique text </div> </div> < ...

jqueryhtmlcssselect

Ensure that selected options are unique across multiple selections

Could you help me with a question that involves matching pairs of words in both Russian and English? <div class="form-group" id="question4"> <label for="q4FirstSelectEN">4</label> <div class="row"> <div class="col-lg ...

javascriptjqueryhtmlcss

Using XPath and Selenium in Java to extract information from HTML tables

I need help organizing data without HTML tags. The data I have looks like this: <table class="SpecTable"> <col width="40%" /> <col width="60%" /> <tr> <td class="LightRowHead">Optical Zoom:</td> ...

javahtmlxpathseleniumwebdriver

Retrieve the desired placeholder text color by utilizing the capabilities of the Selenium WebDriver

https://i.sstatic.net/g52uN.pngLooking for guidance on how to verify the color of placeholder text in an input element using Selenium and Java. In my test scenario, I have an HTML structure like this: <div class="pe-input"> <label for="in ...

javacssselenium-webdriverui-automation

What is the best way to add a button over an image using Tailwind CSS in Next.js?

I've been trying to display a button on top of an image using Tailwind CSS and Next.js, but I'm having trouble getting it to align properly. Here is the code snippet I've been working with: <div> <Image src={projectAiWrite ...

htmlcssnext.jstailwind-css

The width property in Bootstrap is not functioning properly in .NET Core 6

I've exhausted all my options, including documentation and the last 10 stack overflow answers, but nothing seems to be working. I even tried using: <meta name="viewport" content="width=device-width, initial-scale=1"> I attem ...

htmlcssasp.net.netmodel-view-controller

How can I position a CSS Grid grandchild outside the boundaries of its parent using Tailwind CSS?

I'm looking to create a CSS Grid layout where the grandchild element stretches to fit the width of its parent. Here's a demo showcasing my issue -> https://play.tailwindcss.com/jZdsHpPAad The CSS Grid Wrapper I have is as follows: <div cl ...

htmlcssnext.jscss-gridtailwind-css

Is it possible to input a Django template variable within an HTML code in a model's TextField field?

I am looking to dynamically generate external URLs rather than hard-coding them in HTML to accommodate any future changes. Within my template, I have the following code snippet. <p> {{ article.text|safe }} </p> Here is my Article class defin ...

htmldjangodjango-modelsdjango-templatesdjango-views

Anomalies encountered during the iteration of a table

As I work on building a table by looping through an API array, I've encountered a few obstacles. Here is the code snippet that's causing me trouble -> $html = " <tr class='mt-2'> <td>{$rank}.</td> ...

javascripthtml

The Google map is not appearing when placed within the "row" class

My goal is to showcase Google Maps on my website, and every time I try to do so using the following code: <div class="large-12 columns" id="map-canvas"></div> The map displays perfectly and works as expected. However, when I nest this div wi ...

htmlcssgoogle-mapszurb-foundation

Ways to expand a column across two rows using Bootstrao 4

Although this question has been asked numerous times before, the common suggestion is to span a column by placing the other columns into an inner row. Here's an example: <div class="row"> <div class="col-12 col-md-4">logo</div> ...

cssbootstrap-4bootstrap-grid

Connecting a saved link to a picture located in another document using HTML

Hey there! I'm currently working on including an image with the following code: <p class="b1"> <img id="cakes" src="~/images/cakesBanner.png" alt="cakes"> </p> In a different file, I have the following code: <div class="nav ...

.netasp.net-mvchtml

Using ngFor in Angular 6 to create a table with rowspan functionality

Check out this functional code snippet Desire for the table layout: <table class="table table-bordered "> <thead> <tr id="first"> <th id="table-header"> <font color="white">No.</font> </th> <th id="table-hea ...

javascripthtmlangularangular6

Adjust the display of inline-block divs to disregard line breaks

I am having an issue with three side-by-side divs using the display:inline-block property. When the divs are empty, they all align perfectly on the same horizontal level. However, once I add <p> tags and some line breaks (<br/>) to the first ...

htmlcss

A step-by-step guide on setting up an event listener for dynamically generated HTML using JavaScript objects

In my JavaScript code, I am creating object instances that include HTML elements in the form of buttons. These buttons are dynamic and have words generated dynamically as well. I want these buttons to execute certain functions when clicked. The challenge I ...

javascriptjqueryhtml

Utilize AJAX to parse an HTML Table retrieved from an ASP page and extract targeted cell data

Within our work intranet, there exists an ASP page that retrieves data from a variety of sensors. This data is organized in a table format with multiple rows and columns. It struck me as interesting to showcase some of these outputs on our department&apos ...

javascriptasp.nethtmlajax

What could be the reason for requests not displaying the complete HTML code?

I am currently exploring the world of web scraping with Python and BeautifulSoup. During my request, I noticed that some data is missing from the HTML. While the HTML is correct, not all the information is included. The link I am utilizing for this proje ...

htmlbeautifulsouppython-requests