Is it permissible to use a "stand alone" display property of "table-cell" on a div?

update: revised based on feedback:

I inquired because I couldn't locate any documentation specifying where display:xxxx; is permitted.

My curiosity stems from a belief that a rendering engine can interpret the concept of rendering a rectangle as a table-cell instead of a block, even without a surrounding table-row.

However, my certainty is lacking...

I am not seeking workarounds involving scripting (I'm not opposed to it, just irrelevant to my query)


original:

I am still uncertain about certain display property values (e.g., those related to tables);

I require a table (or similar structure) that allows me to style the "row". The issue lies in the fact that the data requiring display essentially necessitates an HTML <table> (meaning: I cannot control the content inside the cells, such as in an invoice - it's not simply formatting static data).

I could resolve my predicament by implementing the code snippet below, simply substituting the table elements accordingly (an abbreviated solution, hoping the intention is clear)

table
  tr
    td 
    td
    td 
  tr
    td 
    td
    td 

with

div
  div
    div display:table-cell;
    div display:table-cell;
    div display:table-cell;
  div
    div display:table-cell;
    div display:table-cell;
    div display:table-cell;

Instructing the inner DIV elements to display as/like table-cell ensures equal height and vertical alignment mimicking cell behavior, thereby resolving the issue

So once again, the question arises: Although it works, is this practice sanctioned?

What puzzles me is that the conventional approach I often encounter advises:

div **display:table**
  div **display:table-row**
    div display:table-cell;
    div display:table-cell;
    div display:table-cell;
  div **display:table-row**
    div display:table-cell;
    div display:table-cell;
    div display:table-cell;

yet this replicates the table, tr, td format (as expected), so why utilize it?

On another note (unexplored by me thus far), how would

table
  tr **display:inline-block**
    td 
    td
    td 
  tr **display:inline-block**
    td 
    td
    td 

The questions arise once more: Is using a "standalone or out-of-context" display: something permissible? And if it functions as anticipated, will it remain effective in the future too?

Answer №1

Let's consider it as being "tolerated"

official W3C standard

specific leaf types based on layout

Such display types necessitate their parent to have a specific display type, while allowing any display-inside value. For instance, a table-caption element must be contained within a table parent, but has flexibility in establishing formatting for its child elements.

When boxes with these specific types are placed in an incompatible parent, according to their respective specifications, they will generate wrapper boxes around themselves.

In the first paragraph, it is explicitly stated that a table parent is required.

However, the second paragraph mentions that if this requirement is not met, the browser will automatically handle it. This suggests that there is a certain level of leniency or permissibility in this context.

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

Struggling with making a rest API request to render HTML

I am trying to retrieve the holders value from a REST API and display it on my website using HTML code. I've attempted the following code, but I'm having trouble actually printing the value. <!DOCTYPE html> <html> <body> <p& ...

Generating a JSon output that contains HTML table data specifically meant to be seen within the fnopen callback function of a jQuery datatable

After spending countless hours searching for a solution to my problem, I decided to take matters into my own hands. The issue at hand revolves around a jQuery datatable that showcases various aspects of a resolver's case load. Claim ID Claimant Nam ...

I prefer to have the div element on its own line without using <br>, as I find it neater that way

I am currently working on a website layout that includes a header with a menu option on the left, a title in the center, and a link to the logIn/signUp page. You can view an image of this layout here: https://ibb.co/z6R1h6w Unfortunately, the login and sig ...

Tracking the progress bar as files are being uploaded via AJAX using HTML5

Currently, I have a progress bar that increments based on the number of files and their sizes. I am looking to implement an overall progress bar to display while uploading files to the server using AJAX and HTML5. Each file is uploaded individually to th ...

What is the best way to adjust the height and width of an mp4 video in Internet Explorer?

I came across a code snippet that looks like this video { object-fit:fill; } <!DOCTYPE html> <html> <body> <video width="800" height="240" controls> <source src="http://www.w3schools.com/tags/movie.mp4" type="video/mp4" ...

Creating a scrollable div with a fixed background using HTML

Attempting to create a full-screen image background with a scrollable div in its center, I crafted the following code: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Bio</title> <link href="../css/layout ...

Choosing jQuery selectors: lists that aren't contained within a div element

I am faced with an HTML structure that resembles the following: <div id='main'> <ul> <li>1_1</li> <li>1_2</li> <li>1_3</li> </ul> <ul> <li>2_1</li> ...

Conditional text-boxes can be added to table columns based on certain conditions

I am working with a table that has three columns: type, 1st type, and 2nd type. The type column contains a button which toggles between two values, Db and Cr. I need to dynamically add a text box to the 1st type column when the button's value is Db, a ...

Ways to position divs without causing them to collapse or override existing divs

I am currently developing a demonstration in which users can select jQuery areas to create square blocks. When a user selects an area and adds a comment with color, the entire block is displayed at a specific position. This feature is working perfectly as ...

Create a dynamic animation using Angular to smoothly move a div element across the

I currently have a div with the following content: <div ng-style="{'left': PageMap.ColumnWrap.OverviewPanelLeft + 'px'}"></div> Whenever I press the right key, an event is triggered to change the PageMap.ColumnWrap.Overvie ...

Quiz Canvas: An interactive HTML game for testing your knowledge

Hello, I am currently working on developing an HTML quiz game using canvas. However, as a beginner in this field, I have struggled to find relevant documentation specifically for this project. Overview of the Game The game consists of 5 scenes, each repr ...

Include the array in the 'content' property of the CSS using Jquery

I need help formatting data in CSS. The code I have is as follows: if (ext){ switch (ext.toLowerCase()) { case 'doc': pos = 'doc'; break; case 'bmp': pos = 'bmp'; break; ...

What is the best way to use absolute positioning in React Native to align an element with its grandparent?

I am trying to position a Font Awesome icon in a React Native project using absolute positioning relative to the grandparent element, rather than its direct parent. After some research, I came across the following information on this page: https://reactna ...

Identify a duplicate class name element using Selenium

<ul class="k9GMp "> <li class="Y8-fY "><span class="-nal3 "><span class="g47SY ">2</span> posts</span> </li> <li class="Y8-fY "><a class="-nal3 " href="/username/followers/" tabindex="0"><span ...

How can I make a bootstrap container maximize the available viewport space?

I've come across several similar posts, but none seem to address my particular dilemma. My challenge lies in presenting a table at the end of a bootstrap grid: <div class="container-fluid"> <!-- Various rows with different size ...

PHP - Sending selected option value to index.php to add new user

In my nuevo.php file, which translates to 'new client', I have set up a form to insert data into a MySQL database. The form includes various input fields such as: <label for="Nombre">Nombre : </label><br/> <input width="50" ...

What is the best way to send a string value from HTML to a JavaScript function as a parameter?

When embedding HTML codes in Java, I encountered an issue where I needed to pass a string value from HTML to a JavaScript function. Initially, I tried using the following code: out.print("<script>init("+macId+")</script>"); However, this meth ...

The stacking order of elements is not affected by the z-index property when using absolute positioning

I have developed a unique custom toggle switch component with the following structure: <template> <div> <label class="switch"> <input type="checkbox" :checked="value" @c ...

Pressing the close button will shut down all bootstrap models

Is there a way to fix an issue where closing Model2 also dismisses the main Model? In my code, there is a button "Launch modal" to open the Model, and within the Model, there is a button "Launch modal2" to open a new model called Model2. However, when ...

How can I showcase GWT widgets on RootPanel?

I have a <div> in My.html file: <html><head> <script type="text/javascript" language="javascript" src=" path/biz.path.nocache.js"></script></head> <div id = "div_test"> </div> Now I have created a java cl ...