Populate any void area when <td> is not occupied in <tr>

I have a table with two rows and columns. If one of the columns is empty, it should move up to the upper row.

For example:

|td1 | td2|
 |td3 |    |
 |td5 | td6|

This is what I want:

|td1 | td2|
 |td3 | td5|
 |td6 |    |

Below is the code snippet that I am using:

<div class="row pl-3 bg-white" id="interests">
  <div class="col-md-12">
    <table class="table table-borderless table-condensed table-responsive-md">
      <tbody>
        <tr>
          <th scope="row"><img id="icons" src="assets/ic_Funding.svg"></img>
          </th>
          <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</td>
          <th scope="row"><img id="icons" src="assets/ic_ITspends.svg"></img>
            </img>
          </th>
          <td>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</td>
        </tr>
        <tr>
          <th scope="row"><img id="icons" src="assets/ic_investors.svg"></img>
          </th>
          <td>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</td>
          <!-- <th scope="row"><img id="icons" src="assets/ic_Hiring.svg"></img></th>
                                    <td>What if this doesn't exist. Can I move td below here?</td> -->
        </tr>
        <tr>
          <th scope="row"><img id="icons" src="assets/ic_Interest Signals.svg"></img>
          </th>
          <td>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum”.</td>
          <th scope="row"><img id="icons" src="assets/ic_WebsiteTechStack.svg"></img>
          </th>
          <td>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>

        </tr>
        <tr>
          <th scope="row"><img id="icons" src="assets/ic_Events.svg"></img>
          </th>
          <td>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</td>
          <th scope="row"><img id="icons" src="assets/ic_CompanyTechStack.svg"></img>
          </th>
          <td>sunt in culpa qui officia deserunt mollit anim id est laborum</td>
        </tr>

      </tbody>
    </table>
  </div>
</div

Is there something missing in my implementation? Previously, I had two separate tables in each col-md-6 but now I consolidated them into one table resulting in rearranged rows. However, they are not rearranging as expected.

htmlcsstwitter-bootstrap

Answer №1

I have identified 2 key issues:

  1. When one of the "Cards" (image with text) is empty, they do not wrap properly.
  2. If we do not use <table>, the images are not displayed in a table-like format.

Let me present 2 different approaches to tackle these challenges:

A. Utilizing col-md-6 for Cards and implementing <table> within

Check out this JS Fiddle for a visual representation

<div class="row pl-3 bg-white" id="interests">
  <div class="col-md-6">
    <table>
      <tr>
        <th scope="row"><img id="icons" src="http://placehold.it/50x50"></th>
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</td>   
...

In this approach, the image will be centered vertically and the text will align closely either to the left or right of the image.

We can explore alternative elements such as Flexbox or CSS Grid instead of relying on <table>.

B. Using col-md-2 for Images and col-md-4 for Text, adjusting image positioning accordingly

View this JS Fiddle example for further understanding

HTML Code Snippet:

<div class="row pl-3 bg-white" id="interests">
  <div class="col-md-2" data-scope="row"><img id="icons" src="http://placehold.it/200x200"></div>
  <div class="col-md-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</div>
...

CSS Styling:

[data-scope="row"] {
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-scope="row"] > img {
  max-width: 100%;
}

This method reduces the number of wrapping elements (<div> and <table>) and allows more customization in terms of image placement. The space between the image and text remains consistent.

Additional Notes:

  1. The data-scope attribute may be omitted by utilizing other CSS selectors like adding an extra class.
  2. Avoid using the same ID (icons) multiple times. The code showcased in the Fiddles serves as an illustration for layout purposes only.

Answer №2

I have set up your table within a div container. I hope this solution is helpful for you. Thank you.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<div class="row pl-4 bg-white" id="interests">
  <div class="col-md-6 mb-4">
    <div class="media">
  <img class="mr-3"id="icons" src="assets/ic_Funding.svg">
  <div class="media-body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
  </div>
</div>
  </div>
  <div class="col-md-6 mb-4">
    <div class="media">
  <img class="mr-3"id="icons" src="assets/ic_Funding.svg">
  <div class="media-body">
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
  </div>
</div>
  </div>
  <div class="col-md-6 mb-4">
    <div class="media">
  <img class="mr-3"id="icons" src="assets/ic_Funding.svg">
  <div class="media-body">
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
  </div>
</div>
  </div>
  <div class="col-md-6 mb-4">
    <div class="media">
  <img class="mr-3"id="icons" src="assets/ic_Funding.svg">
  <div class="media-body">
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
  </div>
</div>
  </div>
  <div class="col-md-6 mb-4">
    <div class="media">
  <img class="mr-3"id="icons" src="assets/ic_Funding.svg">
  <div class="media-body">
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
  </div>
</div>
  </div>
  <div class="col-md-6 mb-4">
    <div class="media">
  <img class="mr-3"id="icons" src="assets/ic_Funding.svg">
  <div class="media-body">
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
  </div>
</div>
  </div>
</div>

Answer №3

If you're struggling to achieve what you want using HTML tables directly, there is a workaround you can consider. Table rows (tr's) are designed to separate content into different rows, so placing items in separate tr's will naturally create distinct rows.

My suggestion would be to create a table with a single row and two cells. Within each cell, you can use divs and adjust the display CSS settings as needed to align the column items horizontally.

For example:

<table>
  <tr>
    <td>
      <div>td1</div>
      <div>td3</div>
      <div>td6</div>
    </td>
    <td>
      <div>td1</div>
      <div>td3</div>
      <div>td6</div>
    </td>
  </tr>
</table>

By default, divs appear on a new line, so you may need to modify their display properties from block to another option based on your specific layout requirements.

I hope this solution works for your needs!

Answer №4

I recommend utilizing the flex property over using table elements.

Take a look at this example to see how you can implement it effectively:

.container {
  display: flex;
  flex-wrap: wrap;
  width: 220px;
  background-color: blue;
  justify-content: space-between;
  padding: 10px;
}

.element {
  width: 100px;
  height: 100px;
  background-color: red;
  margin-bottom: 10px;
}
<div class="container">
  <div class="element">1</div>
  <div class="element">2</div>
  <div class="element">3</div>
  <div class="element">5</div>
  <div class="element">6</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

Assigning a class to a table row does not produce any changes

When a user clicks on a table, I am attempting to achieve two tasks using pure Javascript: Retrieve the row number (this functionality is working) Change the background color of the row Below is my current code snippet: document.querySelector('#t ...

javascripthtmlbootstrap-5

When a new VueJS project is created, it failed to automatically install the necessary basic HTML files and folders

Hey there, I am completely new to Vue.js. Just recently, I installed the Vue.js/CLI and created a brand new project using vue create test. This prompted me to choose from three options: > Default ([Vue 2] babel, eslint) Default (Vue 3 Preview) ([Vue 3 ...

javascripthtmlvue.jsvue-clijavascript-framework

What could be preventing this bootstrap carousel slider from transitioning smoothly?

I've created a CodePen with what I thought was a functional slider, but for some reason, the JavaScript isn't working. The setup includes bootstrap.css, jquery.js, and bootstrap.js. I'm having trouble pinpointing what's missing that&apo ...

javascriptjquerycsstwitter-bootstrapcarousel

Using Express and Node.js to implement the Google Maps API

Currently working on creating a simple web application using the Google Maps API with express/node. At the moment, I have three main files that make up my project: server.js const express = require('express'); const bodyParser = require(' ...

javascripthtmlnode.jsgoogle-mapsexpress

To trigger a Bootstrap 5 modal in a child component from a button click in the parent component in Angular without the need to install ng-bootstrap is possible with the following approach

To achieve the functionality of opening a modal in a child component upon clicking a button in the parent component without using ngx-bootstrap due to restrictions, one approach is to add data-bs-target and data-bs-toggle attributes to the button. Addition ...

javascriptangulartypescripttwitter-bootstrapmodal-dialog

Obtain the accurate sequence of tr elements in the form of a jQuery object

Even though you can define tfoot before tbody in the source code, when displayed in the browser tfoot will still appear last: <table> <thead><tr><th>i get displayed first</th></tr></thead> <tfoot><t ...

javascriptjqueryhtml

Display an image file using the <img src=""> tag in PHP

I am facing a small issue and could use some assistance. My goal is to display the ROW image associated with each unique ID in my database. Below is an excerpt from my PHP code: while ($row = $result->fetch_assoc()) { // Display the image ...

phphtml

Dropzone failing to verify the maximum file limit

I am currently using dropzone to upload files on my website. I have limited the number of files that can be uploaded to a maximum of six. The code works perfectly when uploading one image at a time, but if I select more than six images by holding down the ...

javascriptjqueryhtmldropzone.js

What is the best way to restrict a link to only a specific div element and not a Bootstrap

My HTML conundrum involves a div styled with the class .win_box: This particular div is nested within a Bootstrap column, and the link associated with it extends throughout the entirety of said column. However, I want to restrict user access to this link ...

htmlhyperlink

The background image fails to show up on the mobile device display

Currently, I am working on an app with Ionic, but unfortunately, the background image is not showing despite all my efforts. I have gone through various solutions provided in previous questions, but none of them seem to work for me. Here is the CSS I am u ...

htmlcssangularjsionic-framework

The HTML file input is not activating the on change event and the file input control is not functioning

My HTML form is designed to save product information and then automatically refresh to display the saved data. Additionally, users have the option to upload a document. However, I have encountered two main issues: Before the product information is saved, ...

jqueryasp.net-mvchtml

Tips on transitioning from Modal1 to Modal2 in Ionic after a successful submit button press?

My survey app requires users to fill out a form and click the Submit Feedback button. Upon successful submission, a message saying "Feedback submitted successfully" should be displayed in Modal2, which is inside another modal named (Modal1). However, being ...

javascriptcssangularionic-frameworkmodal-dialog

Transferring an HTML file to a destination stream

Currently, I'm in the process of constructing a proxy server. One of the tasks I'm tackling involves blocking specific URLs. I have developed a simple HTML page that is supposed to display whenever a blocked URL is requested, but unfortunately, ...

javahtmlproxyserver

Excessive greed in 2 column layout is causing left alignment issues

Check out the sample code here: http://jsfiddle.net/YUhgb/ HTML Markup <html> <body> <div class="left"></div> <div class="right"> <div class="container"> <div class="i ...

htmlcss

Is it feasible to place an ordered list within a table row <tr>?

Below is a code snippet demonstrating how to create an ordered list using JavaScript: Here is the JavaScript code: <script type="text/javascript"> $(document).ready(function() { $("ul").each(function() { $(this).find("li").each(functio ...

javascriptjqueryhtml

Unable to apply Login Form Css to HTML

Creating a Login Form <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Login Form</title> <link rel = "stylesheet" type="text/css" href="{{ ...

htmlcssflask

Flexbox Columns Maintaining Width when Window is Resized

My current challenge involves utilizing Flexbox to create a responsive layout with 5 boxes that shrink when the browser window is resized. However, 4 of these boxes are not reducing their width as expected when placed in columns. (Despite Bob behaving cor ...

cssflexboxresponsive-design

The margin property in jQuery does not seem to be functioning properly when trying to send

Within the view page, there is jQuery code that sets a margin on a div. Below is the code: <script type='text/javascript'> $('#someID').css('margin-left', '10px'); </script> This code functions proper ...

jqueryruby-on-railscssactionmailer

Tips for enhancing redundancy in HTML and ROR using partials

Looking for a way to merge two partials in my Ruby on Rails app without copy-pasting. Here's what I'm aiming for: @member = 'Player' render 'team/team_partial' @member = 'Staff' render 'team/team_partial&a ...

htmlruby-on-railsredundancy

Using jQuery to create a script that will transition random images simultaneously within a div

I am currently working on a JavaScript script that will animate 10 images flying into a div, appearing side by side. The goal is to have each image fly in randomly with a unique transition. At the moment, my script is almost complete as I've successf ...

javascriptjqueryhtmlcss