td:before combined with vertical-align:middle

To achieve a table with square cells, I implemented the following CSS:

table {
    width: 100%;
    table-layout: fixed;
}
td {
    text-align: center;
    vertical-align: middle;
}
td:before {
    content: '';
    padding-top: 100%;
    float: left;
}

However, the vertical-align property does not work as expected for cell content. Can anyone suggest a solution?

The HTML code used is as follows:

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>

http://jsfiddle.net/FU84y/1/

htmlcsshtml-tablevertical-alignment

Answer №2

To avoid removing the padding, simply assign a height to the table cell.

table {
width: 100%;
table-layout: fixed;
}
td {
text-align: center;
vertical-align: middle;
height: 40px;

}
td:before {
content: '';
float: left;
padding:100%;
}

Check out this example on fiddle.

Answer №3

In order to achieve the desired result, it is important to remove the line padding-top: 100%; from the td:before section. Check out the DEMO here

Here is the HTML code:

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>

And here is the relevant CSS code:

table {
    width: 100%;
    table-layout: fixed;
}
td {
    text-align: center;
    border: 1px solid #ececec;
    height: 50px;
}
td:before {
    content: '';
    float: left;
}

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

Looking for assistance with CSS positioning techniques

Creating a dropdown list with a caret icon for each item is my goal, but I'm facing some challenges. Here's the code snippet of the div structure: <div class="class-to-div1" id="{{ div.id }}" data-cardsnum="{{ div.num }}"> <div clas ...

htmlcss

The issue with data targeting in Bootstrap 3 persists

header.php code <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN"> <html lang="EN"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=UT ...

phphtmlcss

I'm wondering why my element is aligning itself with its sibling. It seems that when the parent has overflow set to hidden, it causes the children's

Let me break down the diagram below for you: The main box is marked in yellow and serves as the parent element. Within this parent box, there are two child elements, one in black and one in cyan. To hide any excess content of the cyan box that overfl ...

htmlcssoverflowmargin

Customize the color when clicking on a mat-slide-toggle

Whenever I click on the element, a shadow appears in the color that corresponds to the element, which is currently yellow I would like to change that shadow to be green instead, but I am unsure of how to do so. Here is my code: HTML <mat-checkbox i ...

htmlcssangularcolorsangular-material

What causes TypeScript to interpret an API call as a module and impact CSS? Encountering a Next.js compilation error

My website development process hit a roadblock when I tried integrating Material Tailwind into my project alongside Next.js, Typescript, and Tailwind CSS. The compilation error that popped up seemed unrelated to the changes, leaving me baffled as to what c ...

csstypescriptnext.jscompiler-errorstailwind-css

Ways to reverse engineer HTML, CSS, and JavaScript code into HTML format

Help needed! I am trying to edit the user interface but all the code is in one line and I can't figure out how to decompile it back to its original state. Can anyone offer assistance with this? <html lang="en"><head><meta char ...

javascripthtmlcssreactjsdecompiling

Safari in iOS8 experiencing problems with -webkit-overflow-scrolling: touch;

Our team has been developing a web app for a client that functioned perfectly on iOS7 in Safari. However, upon testing the app on iOS8, some significant bugs were discovered. After a user opens and closes the sidebar, content within a <section style=" ...

htmlioscss

Achieve a full-width span for a single item in a CSS grid without any alterations to the HTML code

How can I make the first item in this grid span 100% without changing the HTML structure? The first item is assigned an extra class ".sub" Is it possible to achieve this? Click here for more information <div class="fd-col fd-5col"> <div class= ...

csscss-grid

Pass the values of both buttons to a different page using PHP

I am currently developing a system for a hospital. The data is sourced from an array and I need to pass the values from two buttons to another page. For example, on the initial page: 1 xyz First 2017-04-08 11:35:00 body checkup Generate Presc ...

javascriptphpjqueryhtmlarrays

Managing the width of an HTML table column based on its text content dynamically

Here is an example of an html table : <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="480px" class="societe" ><div style="float:left;font-size:12px;padding-top:2px" ><?php echo $_SESSION ...

htmlcssxhtmlpixelfont-size

Issues with functionality arise when cloning HTML divs using JQuery

VIDEO I created a feature where clicking a button allows users to duplicate a note div. However, the copied note does not function like the original - it's not draggable and changing the color of the copied note affects the original note's color. ...

javascripthtmljquery

Is jQuery Mobile Autocomplete's search feature activated after typing 3 letters?

Hello there, I am in the process of creating a website and have implemented an autocomplete field. However, I am facing an issue due to having over 1000 <li> elements within the <ul>, making it slow especially on mobile devices. I would like t ...

javascripthtmljquery-mobileautocomplete

Webpage refreshing when resizing browser

Hey there, I'm facing an issue where my HTML website restarts whenever the browser size changes. Can someone please help me fix this? You can check out my website here I have uploaded my code files here: Code Files Link ...

javascripthtmlcssreload

Interpolation problem with AngularJS translation service

I've successfully implemented a ternary operator in my HTML: {{ qp.QP_TRANSFERS === '1' ? qp.QP_TRANSFER_TYPE_NAME + ' transfer' : 'No transfer' }} In addition, I am utilizing a translation service with JSON objects. He ...

htmlangularjsangularjs-interpolate

Is there a way to ensure that neighboring divs have the same height as the tallest div in a row?

In the product description column, the value spans two lines, causing the row to adjust its height accordingly. However, the issue arises when adjacent divs do not match this height, resulting in an incomplete border as shown in the image below. This probl ...

htmlcss

How can I remove a specific JSON object from localStorage based on the data associated with the element that is currently being clicked on?

Unique Scenario A user interacts with an element, triggering a change in the background image and storing data related to that element in localStorage: this process functions correctly. Next, the toggle variable is set to 0, the background image change ...

javascriptjqueryhtmlcsslocal-storage

The sub-menu positioning feature functions properly in Chrome and Safari, but is not compatible with Internet Explorer and Firefox

Working on a website for a gaming community, known as http://www.quad-gaming.com/. All is running smoothly except for the dropdown menu under "Login" on the right side of the navigation bar. It behaves properly in Chrome and Safari, but in IE and Firefox, ...

htmlcssmenunavigationsubmenu

"Customize the dimensions and scroll behavior of a division

I've been struggling to make a single-page site full-width, and I can't seem to get it right. My goal is to create sections that are: Full width Background image full width The height of the div should be at least the same as the image, adjust ...

htmlcss

Attempting to design a form that will trigger a print dialog box displaying all the information entered in the form

I am currently working on developing a form that will allow users to input information such as Name, Age, Gender, Hobbies, Contact details, and Photo in order to create a resume. My goal is to build a simple local HTML-based application that generates a RE ...

javascriptphphtmlformsbootstrap-4

"Exploring the process of utilizing AngularJS to open a .docx file in a new template

When attempting to open a .jpeg or .pdf file in a new template using an iframe, it was successful. However, the same approach failed when trying to open a .docx file. How can this issue be resolved? Angularjs code: $scope.openTemplate = function ($fpath ...

htmlangularjsiframe