I'm attempting to create a table through RAILS that is automatically generated in the default layout. However, I want to customize its appearance using CSS to achieve the desired look.
Specifically speaking, from the attached image, I would like the third column to be displayed as a row instead. Can this be achieved using CSS?
Restyling a table using JavaScript is a straightforward task. Let's say your table is named your-table. Simply select the table, move the last cell to a new row, and insert it after the current row.
When adding rows to the table, remember to start at the end of the table to avoid an infinite loop. Using
for(var i=0; i<rows.length; i++)Fiddle: http://jsfiddle.net/QP8ga/
function updateTable(table){
var rows = table.rows;
for(var i=rows.length-1; i>=0; i--){
var tr = document.createElement("tr");
var td = rows[i].cells[2];
td.colSpan = "2";
tr.appendChild(td);
rows[i].parentNode.insertBefore(tr, rows[i].nextSibling)
}
}
window.onload = function(){
var table_IDs = ["your-table", "another-table"];
for(var i=0; i<table_IDs.length; i++) updateTable(table_IDs[i]);
}
The code has been adjusted to handle multiple tables. The provided fiddle demonstrates a simple example with one table.
For those interested in a challenging academic exercise, here is a CSS-only solution. Unfortunately, this method will only function correctly on browsers that fully support modern CSS and does not have compatibility with Internet Explorer.
th {
display:none;
}
table, tbody, tr, td {
display:block;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
border : 0px solid black;
}
table {
border-width : 1px 1px 0px;
}
td:nth-child(1) {
width :50%;
float:left;
}
td:nth-child(2) {
width :50%;
float:left;
border-left-width: 1px;
}
td:nth-child(3) {
clear:both;
border-width: 1px 0px;
}
Check out the code in action here
Currently, I am faced with a dilemma regarding two sets of options for an HTML form. One set consists of various units (such as cm, in, ft.), while the other set includes different locations. The selection of a unit would restrict certain location option ...
After completing my website using HTML, CSS, and JavaScript, I added a form with inputs for name, email, and message at the bottom of the page. Now, I am trying to figure out how to receive the information submitted by visitors in my email. ...
Currently, I'm utilizing jqmobile pages for switching between various pages in an html5 application. One of these pages features a jqplot chart. Below is the code snippet: <div data-role="page" id="page-two" data-title="Page 2"> &l ...
When working with React-Admin, I encountered a challenge in applying specific CSS code globally within my Material UI theme. As I set up my theme, I included the following lines in the overrides section: overrides: { "@global": { &quo ...
In my current project, I am working on extracting data from a JSON file and presenting it to the user in a way that allows them to input values that match the expected data. My goal is to show different sections of the screen at different times. The initi ...
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title><$BlogPageTitle$></title> <meta property="og:title" content=" ...
As a beginner in JQuery, I am looking to locate an inputted value within multiple labels by using a Find button. Below is the HTML snippet. Check out the screenshot here. The JQuery code I've attempted doesn't seem to give me the desired output, ...
I am currently facing an issue with my HTML code. It works perfectly fine for a small JSON file, displaying the data in an HTML table as expected. However, when I try to load a larger JSON file with around 15,000 rows of data, my page becomes unresponsiv ...
I have a web application built using asp.net that utilizes ajax calls. Below is the code snippet for my web method which successfully responds to the ajax call. ADController adc = new ADController(); DataTable dt = adc.GetGeneral(Convert.ToInt32(A ...
In this scenario, an Iframe is automatically generated by a JavaScript script. I am looking to simulate a click by triggering a button, but unfortunately, it is not working as expected. You can view the code on JSFiddle. I have attempted various approache ...
I am looking to develop a system where I can edit various elements such as the navbar, paragraphs, and images directly from a web page. I understand that this can be achieved with JavaScript, but I am facing the issue of my customizations reverting to defa ...
I'm having trouble aligning two DIVs within a table TD to the bottom of the table. Despite trying various alignment methods, the left DIV simply won't move. It's crucial for me to design this email responsively, ensuring it still displays co ...
I am stuck with the following HTML code: <section> <div id="first"> ---content </div> <div id="second"> ---content </div> </section> When the page loads, the second div and its contents are not visible (I'm uns ...
Attempting to extract table data from the following URL: In a previous scraping attempt, the Python packages utilized were: from bs4 import BeautifulSoup import requests import mysql.connector import pandas as pd from sqlalchemy import create_engine Howe ...
I recently created a website that is optimized for tablet screens and included images. However, I noticed an unwanted gap between the first column and third column that needs to be fixed. My plan is to adjust the layout using Bootstrap code or another meth ...
Currently, I am facing a challenge where I want to retrieve the title, plot, and poster using the themoviedb API. However, I am lost on how to begin coding this. Whenever I perform a search, the information is displayed in the console log of the browser. ...
One issue I am facing is taking an input from a search box and using that value as a parameter for another function. However, every time I click the button, the global variable resets itself when the page refreshes. In my javascript code, this is what I h ...
I struggle to understand how these things work and I would greatly appreciate it if someone could provide an explanation. 1 http://d.pr/i/6TgE+ why http://d.pr/i/UAZn+ *it's actually 9. Here is the code snippet: <header> <div class=" ...
Hello, I need assistance from someone. I encountered an error message after trying to delete a row even though I have declared the button already. Error: deleted1 is not defined at HTMLButtonElement.onclick Could it be due to the script type being modul ...
I'm currently trying to customize the appearance of these MUI tabs, specifically the tab color and bottom border color. Despite my attempts using makeStyles and other methods, I haven't been able to achieve the desired result. https://i.sstatic.n ...