Transform a <td> into a table-row (<tr>) nested within a parent <tr> inside an umbrella structure

Similar questions have been asked in the past, but I still haven't found a solution to my specific inquiry. Here it is:

I have a table that needs to be sortable using a JavaScript plugin like ListJS. The key requirement is that I must have only one <tr> element per listing.

This is an example of how my table is structured:

<table>
  <tr>
    <td class="line1">line 1</td>
    <td class="line1">line 1</td>
    <td class="line1">line 1</td>
    <td class="line1">line 1</td>
    <td class="line2">line 2</td>
    <td class="line3">line 3</td>
  </tr>
</table>

You can view the structure here: http://jsfiddle.net/t6zadmhd/

Specifically, I need the content of <td class="line2"> and <td class="line3"> to appear below the "first line" of cells in a separate row-like format.

I've experimented with applying display:block; and display:table-row; to .line2 and .line3, but the desired layout remains elusive.

Is there a way to achieve this effect?

UPDATE: This is how I envision the final design output: http://jsfiddle.net/op5cb4qt/

javascripthtmlcsshtml-table

Answer №1

If you want to reset the display property, one option is to utilize the flex box model to completely override the table-layout:

body {
  color: #fff;
}
table,
.line2,
.line3 {
  width: 100%;
}
tr {
  display: flex;
  flex-flow: row wrap;
}
td {
  display:block;/* IE fix */
  margin: 1px;
}
.line1 {
  background: red;
  flex: 1;
}
.line2,
.line3 {
  background: blue;
}
.line3 {
  background: green;
}
<table>
  <tr>
    <td class="line1">line 1</td>
    <td class="line1">line 1</td>
    <td class="line1">line 1</td>
    <td class="line1">line 1</td>
    <td class="line2">line 2</td>
    <td class="line3">line 3</td>
  </tr>
</table>

http://jsfiddle.net/t6zadmhd/1/

However, if it's not actually a table, consider using regular HTML tags instead.

To delve deeper into flexbox, check out https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer №2

tr{display:flex;flex-wrap:wrap;}
.line2, .line3{width:100%;}
<table>
  <tr>
    <td class="line1">line 1</td>
    <td class="line1">line 1</td>
    <td class="line1">line 1</td>
    <td class="line1">line 1</td>
    <td class="line2">line 2</td>
    <td class="line3">line 3</td>
  </tr>
</table>

Answer №3

To achieve this effect, simply use the CSS property display: block; along with a specified percentage width.

td {
  padding: 0;
  margin: 0;
}

.line1 {
  background: red;
  float: left;
  display: block;
  width: 25%;
}

.line2 {
  background: blue;
  float: left;
  display: block;
  width: 100%;
}

.line3 {
  float: left;
  background: green;
  display: block;
  width: 100%;
}

Answer №4

There are multiple methods to achieve this goal. Although flex is the most convenient and eliminates the need for a table, it may not be suitable if you have older browser requirements. In such cases, using float can help accomplish your desired layout without relying on flex.

http://jsfiddle.net/eeb03gts/2/

body {
  color: #fff;
}
table {
  width: 100%;
}
table, tr, td {
  box-sizing: border-box;
}
tr {
  clear:both;
}
.line1 {
    background: #f00;
    width: 25%;
    float: left;
}
.line2 {
    background: #00f;
    float: left;
    width: 100%;
}
.line3 {
    background: #008000;
    float: left;
    width: 100%;
}
<table>
  <tr>
    <td class="line1">line 1</td>
    <td class="line1">line 1</td>
    <td class="line1">line 1</td>
    <td class="line1">line 1</td>
    <td class="line2">line 2</td>
    <td class="line3">line 3</td>
  </tr>
</table>

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

Transitioning one element's opacity to zero while concurrently increasing another element's opacity to replace it

There are a total of 3 div elements and 3 links included in this setup. The goal is to only display one div at any given time. Upon clicking on a link corresponding to a different div, the current one should fade out while the selected one fades in seamle ...

javascriptjquerycss

Exploring the intricacies of Bower and enhancing dependency management

Currently, I am working on developing a project named myapp using angularJS along with Yeoman Generator. This project involves utilizing Bower to manage dependencies and Grunt to wiredep those dependencies into the index.html file (which essentially genera ...

javascriptangularjsyeomanbower

Creating a notification system similar to Facebook's in an HTML button using just HTML and CSS

I'm attempting to create a button with a notification feature that mimics the style of Facebook notifications. I want a small red circle in the top right corner, showing a numerical value. However, I'm running into some difficulties. I can' ...

htmlcss

Should I utilize Next.js API route or communicate directly with Firestore from the client side?

Greetings, I am new to Next.js and have a few queries regarding utilizing Firebase authentication on both the client side and server side. My project is set up with Firebase admin and client SDKs, and I have a signup page where users provide their name, em ...

javascriptfirebasegoogle-cloud-firestorenext.jsfirebase-admin

How to display an object in JS format using React?

Currently, I am tackling a project that presents me with the following situation: myjson: { completeName: "my name is {this.state.myName+ " "+this.state.surname}" } component.js var Component = React.createClass({ getInitialState: function() { ...

javascriptjsonobjectreactjsreactjs-flux

Can you help me with compiling Twitter Bootstrap 3.0 on my Windows 8?

Can anyone guide me on compiling Twitter Bootstrap using Less on a Windows machine? I tried following a tutorial but ran into issues with installing lessc (it was not in the npm registry). Also, the tutorial was for BS2 and not 3.0 which made me skeptical ...

htmlcssnode.jstwitter-bootstrap

What could be the reason why this XMLHttpRequest demo from Mozilla isn't functioning properly in Firefox 3?

Having some trouble with getting the sample code from Mozilla to work with a REST web service in Firefox 3.0.10. Surprisingly, it works fine in IE 8! Why is this not working? Does IE 8 support XMLHttpRequest? Most examples I've seen use ActiveX allo ...

javascriptajaxfirefoxrestxmlhttprequest

What is the best way to dynamically implement text ellipsis using CSS in conjunction with Angular 7?

i need to display a list of cards in a component, each card has a description coming from the server. In my component.html, I am using a ngFor like this: <div [style.background-image]="'url('+row.companyId?.coverUrl+')'" class="img- ...

cssangulartypescript

Tips for determining the size and identifier of a newly appended element in jQuery?

Struggling to create a select element with a width="347px" and id="select-box-1". I attempted to use .append("select"), but my search on .append() didn't yield the desired results. Unsuccessful Attempt: .append("< ...

javascripthtmld3.jsappend

Ending the jQuery Modal box

Struggling to create a simple modal on my own, and I'm facing some difficulties (probably because I'm more of an expert in jQuery - but let's not dwell on that too much). This is the HTML markup I have: <div id="modal-boxes"> < ...

javascriptjqueryhtmlmodal-dialog

Combine es6 imports from the identical module using an Eslint rule or plugin

Looking to consolidate my ES6 imports from a single module into one for my React project. For example: import { Title } from "@mantine/core"; import { Center } from "@mantine/core"; import { Divider } from "@mantine/core"; T ...

javascriptreactjsecmascript-6import

Issue with Laravel 5.4: AJAX behaving unexpectedly and not returning errors as it should

After going through several tutorials on handling AJAX requests in Laravel, I'm still facing some issues. Each tutorial has its own approach... Finally, one method is not giving me a 500 error, but it's not displaying validation errors as expect ...

javascriptphpjqueryajaxlaravel

Running pug directly from the local node_modules directory

I'm currently attempting to run pug (/jade) from my node_modules directory, however I am unable to locate the executable within the node_modules/.bin folder. I am running MacOS 10.12.5 and installed pug using the "npm install --save pug" command. Is ...

javascriptnode.jsnpmpug

What is the best way to customize the style using a CSS class?

Is it possible to alter a specific style with a CSS class using jQuery or JavaScript? For example, if the HTML looks like this: <tab> <a class="anchor">a</a> </tab> And the CSS looks like this: a {border:1px} .anchor {color: ...

javascriptjquerycss

Guide to creating two-way data binding using ngModel for custom input elements like radio buttons

I am currently facing an issue with implementing a custom radio button element in Angular. Below is the code snippet for the markup I want to make functional within the parent component: <form> <my-radio [(ngModel)]="radioBoundProperty" value= ...

javascriptangulartypescript

The Upstash Redis scan operation

Attempting to utilize the @upstash/redis node client library for Node.js (available at https://www.npmjs.com/package/@upstash/redis), I am facing challenges in executing the scan command, which should be supported based on the documentation. Specifically, ...

javascriptredisnext.js

Tips on incorporating jQuery cross-domain functionality

Attempting to retrieve and display the firstName data from this URL: http://www.w3schools.com/jquery/demo_ajax_json.js, as part of a test for another project. Encountered the error message: Origin null is not allowed by Access-Control-Allow-Origin, prompt ...

javascriptjqueryajax

Tips for customizing the AjaxComplete function for individual ajax calls

I need help figuring out how to display various loading symbols depending on the ajax call on my website. Currently, I only have a default loading symbol that appears in a fixed window at the center of the screen. The issue arises because I have multiple ...

javascriptjqueryajax

Please refrain from including HTML code within the div element

When I input the following text inside a textarea: <strong>test</strong> and then display it within a div, the text appears in bold instead of showing the HTML code as entered. How can I prevent the HTML code from being rendered and instead d ...

javascriptjqueryhtml

Find the mean of three numbers stored in an array of objects

I am currently working on a school assignment that requires me to develop a function for calculating the average mark of 3 students using an existing object in an array. Below, you can see the array and function that I have been working on as part of this ...

javascriptnode.jsarraysfunction