Floating TDs table after four consecutive columns

I am in need of a table that will consist of 4 TDs in each row and then automatically move to a new row. In the HTML, I prefer only listing the TDs because I plan on adding more cells constantly and require them to stay in alphabetical order without having to adjust the entire structure every time a new one is added. Each cell will contain an image and text (which could be multiple words).

I am uncertain whether Float or Counter would be best for achieving the wrapping effect to make them 4 cells wide. The last row, if not completely filled, does not have to be centered. A Border is unnecessary as well.

This is the desired appearance (with the last row's cell being a nice blank space) https://i.sstatic.net/U095Z.png

htmlcss

Answer №1

Forget about using a table.

Since you mentioned having a list, why not utilize one?

<ul class="tiles">
    <li>...</li>
    ...
</ul>

Next step is to add some CSS magic:

.tiles {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.tiles>li {
    display: inline-block;
    width: 25%;
    box-sizing: border-box;
    border: 1px solid black;
    padding: 4px;
}

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

Creating a dynamic HTML5 video player with Fancybox and VideoJS

What is the best way to ensure that an HTML5 video remains responsive inside a fancybox that is already responsive? Here is the code that I currently have: <a class="preview" href="#inline123"> <img class="item" src="/thumbs/thumb.jpg" widt ...

jqueryhtmlvideoresponsive-designfancybox

Mastering the Art of Content Swapping in SPA

Hey there! I'm in the process of creating a webpage using tornado io and incorporating various graphs. To add some single page app magic, I decided to swap out content within a div like so: <div id="chartType"> Chart goes here</div> <a ...

javascriptjqueryhtml

What could be causing the distance between the image and the navigation bar?

Hey there, I'm struggling with a pesky little gap that's sneaking in between an image and my navigation bar. I've exhausted all my usual tricks like setting inline-blocks on the ul and li levels, and trying to align everything left with text ...

htmlcss

Automatically populating and submitting a form after receiving search results via ajax

I have been struggling with this issue for a few days now and could really use some help from the experts here. I am new to sql, javascript, jquery, ajax, css, and php. Although I studied Computer Science in college 15 years ago, I seem to be missing some ...

javascriptphpjqueryhtmlajax

jQuery Counter Effect encountering isNaN error when trying to display a number retrieved from a get API object

I am looking to display the numerical data retrieved from an API using JSON. I want to incorporate a counter effect that displays "isNaN" if necessary. The API URL returns an object with the total number saved in data.data. Can anyone assist me with achi ...

javascriptjqueryhtmlcssbootstrap-4

Ensure that div elements have consistent heights using flexbox properties

I’m trying to get my blocks to display inline and have a consistent height regardless of the amount of text inside them. I’ve got them lined up next to each other, but I can’t figure out how to make sure they all have the same height. Here's th ...

htmlcssflexbox

Adding and removing dynamic fields with Bootstrap functionality

Recently, I've been trying to develop a feature where users can add and remove fields by clicking on a button. However, I've encountered a roadblock in my progress. If you take a look at this CodePen link, you'll see what I have so far. My a ...

javascripthtmltwitter-bootstrap

Learning how to track mouse wheel scrolling using jQuery

Is there a way to track mouse scrolling using jquery or javascript? I want the initial value to be 0 and increment by 1 when scrolling down and decrement by 1 when scrolling up. The value should always be positive. For example, if I scroll down twice, the ...

javascriptjqueryhtmlcss

Using CSS to overlay a fixed element with a specific z-index

HTML: <div class="wrap"> <div class="fixed"></div> </div> <div class="cover"></div> CSS: .cover{z-index: 10;} .wrap{position: relative; z-index: 1;} .fixed{position: fixed; display: block; z-index: 1;} Example: ...

htmlcsscss-positionfixed

Consistent column height across each row

Currently, I am utilizing bootstrap and jquery to accomplish a specific task. My goal is to select the first child class after all columns on the webpage. var one = $(".col-x .some-class") Afterwards, I aim to obtain the height of all elements with the . ...

javascriptjqueryhtmlcsstwitter-bootstrap

Interactive Canvas & Slide Show Presentation - Foundation 6

I am facing a unique problem. My current project involves using the Chart.js library to generate charts within certain div .carousel-item elements. The project also utilizes a Bootstrap 4 template with its own set of css and js. The issue arises when I dy ...

cssbootstrap-4

Is there a way to adjust the width of a React.Image component while allowing the height to automatically adjust to preserve the aspect ratio?

Is there a way to define the width of a React.Image component while ensuring that the height adjusts automatically to maintain aspect ratio? I have attempted setting the height to 'auto' like so... imageStyle: { width: 400, height: ' ...

cssreactjsreact-nativestyles

Choose a particular element using a randomly generated ID in JQuery

One challenge I am facing is that the ID of an element is generated randomly: <?php echo "<input id='input'".uniqid()." />"?> I'm wondering how to access this element using jQuery. Is it possible to access it using a wildcard l ...

phpjquerycss

how can I display the JSON description based on the corresponding ID using Ionic 3

I have a JSON file containing: [{ "id": "1", "title": "Abba Father (1)", "description": "Abba Abba Father." }, { "id": "2", "title": "Abba Father, Let me be (2)", "description": "Abba Father, Let me be (2) we are the clay." }, { ...

htmljsontypescriptionic-framework

How can I extract information from an HTML element using its ID in JavaScript?

Can anyone please help me retrieve the date using JavaScript from the following div: <div id="popupDateFieldMin" class="dateField">2017-08-02</div> Below is the code snippet I am currently using: var cal = document.getElementById( 'popu ...

javascripthtml

How can I transfer a variable between two scripts on the same webpage?

Everyone, I've hit a roadblock with this issue and I can't seem to pinpoint what the mistake might be. I have a PHP file containing multiple scripts, including both PHP and jQuery sections. My aim is to transfer a PHP variable from the HTML Head ...

phpjqueryhtmlsql

Printed plaintext of CSS & jQuery code on the 200th iteration in PHP

I encountered an issue while working on a script that involved displaying query data based on domain type (referred to as typeX & type Y). To achieve this, I utilized the jQuery slidetoggle function along with some CSS. Everything was functioning perfectly ...

phpjqueryhtmlcss

Icons positioned centrally while floating to the left

There seems to be an issue with centering the icon CSS: .icons .overview { position: relative; float: left; width: 16.6666666667%; text-align: center; overflow: visible; } .icon { display: inline-block; width: 64px; heigh ...

htmlcssweb

Encountering an Uncaught TypeError that is hindering an alert for the score, but I am uncertain about the solution despite the game functioning properly

My Yahtzee code is functioning normally during gameplay, but I'm facing issues with getting alerts for the total score and bonus points. I have identified where the problem lies but I am unsure how to resolve it. I attempted debugging through alerts, ...

javascripthtmltypeerror

PHP results can be manipulated with jQuery and JavaScript

I have a unique jQuery script that is designed to insert custom content after each paragraph in news articles. Here's an example: $(document).ready(function() { $("<a>The link inserted in jQuery</a>") .insertAfter("p") ...

javascriptphpjqueryhtml