Tips for effectively showcasing dynamic data retrieved from a database

I need to showcase my dynamic data from a database in a specific format that can accommodate anywhere from one to five variables. https://i.sstatic.net/pPQZE.png https://i.sstatic.net/gSJw6.png

How can I effectively display and present the data using HTML and CSS? I've attempted using div and span elements, but the results are not visually pleasing (refer to image number 3 for the current output).

<div style="margin: 5% 0 0 0" id="part">
  <div style="width: 55%; margin-top: 3%; display: inline-block; vertical-align: top">
    <p style="
                transform: rotate(-90deg);
                width: 175px;
                height: 50px;
                float: left;
                background: gray;
                color: #fff;
                text-align: center;
                padding-left: 10px;
                padding-top: 15px;
                margin: 40px 0 0 0">List1: {{ en.form.nbTotalCon }}</p>
    <p>
      <span style="display: block;margin-left: 98px; margin-bottom: 3px;background-color:darkgray  "> {{ en.form.part1 }}</span>
      <span style="display: block;margin-left: 100px;margin-bottom: 3px;">  {{ en.form.part2 }}</span>
      <span style="display: block;margin-left: 100px;margin-bottom: 3px;background-color:darkgray ">  {{ en.form.part3 }}</span>
      <span style="display: block;margin-left: 100px;margin-bottom: 3px; "> {{ en.form.part4 }}</span>
      <span style="display: block;margin-left: 100px;background-color:darkgray ">  {{ en.form.part5 }}</span>
    </p>
  </div>

  <div style=" width: 40%;margin-top: 3%; display: inline-block;vertical-align: top ">
    <p style="
                transform: rotate(-90deg);
                width: 160px;
                height: 50px;
                float: left;
                background: gray;
                color: #fff;
                text-align: center;
                padding-left: 10px;
                padding-top: 15px;
                margin: 40px 0 0 0">
      Projects:{{ en.form.nbTotalProj }} </p>
    <p>
      <span style="display: block;margin-left: 100px;background-color:darkgray"> {{ en.form.nomProj1 }} </span>
      <span style="display: block;margin-left: 100px;">  {{ en.form.nomProj2 }}</span>
      <span style="display: block;margin-left: 100px;background-color:darkgray">  {{ en.form.nomProj3 }} </span>
      <span style="display: block;margin-left: 100px;">  {{ en.form.nomProj4 }}</span>
      <span style="display: block;margin-left: 100px;background-color:darkgray">  {{ en.form.nomProje5 }} </span>
    </p>
  </div>
</div>

This is the current output based on the above code:

https://i.sstatic.net/QVedB.png

htmlcss

Answer №1

Let's give this a shot:

$(document).ready(function(){

var cont = $(".container");

cont.find(".header").width(cont.height() +(cont.find("td > table td").length * 10));
cont.find("td > table").css({"margin-left": "-" +(cont.find(".header").height() ) +"px" }); /// more improvements needed
});
.header{

transform: rotate(-90deg);
width: 149%;
height: 36%;
display:inline-block;
background: gray;
color: #fff;
text-align: center;
padding-left: 0px;
padding-top: 15px;
margin: 0px 0 0 0;
position:relative;
top:0;
left:-30px;
}

table{
min-width:300px;
height:100%;

}

td table td{
border:1px solid #CCC;
padding:5px;
}

.container{
height:100px;
}

td >table{
position:relative;
left:-10%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
<table>
<tr>
<td><div class='header'> this is header </div></td>
<td>
<table>
<tr>
<td> 1</td>
</tr>
<tr>
<td> 2</td>
</tr>
<tr>
<td> 2</td>
</tr>

<tr>
<td> 2</td>
</tr>

<tr>
<td> 2</td>
</tr>


</table>
</td>
</tr>

</table>

</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

Trouble with CSS3 Perspective rendering issue

Here's a simple example showcasing the use of CSS3 Perspective property to create a 3D side flip effect. However, this basic demonstration does not seem to achieve the desired outcome. <html> <head> <style> .div1{height:300px; ...

htmlcss

Ensuring seamless user recognition when redirecting them to a new HTML page

In our web application, new users are assigned a standard password upon registration. Upon logging in with the standard password, they are automatically redirected to a 'change Password' page where they can update their password. However, we hav ...

javascripthtmlangularjschange-password

Instructions on how to automatically close a Bootstrap 5 alert without using jQuery

With the removal of jQuery as a dependency in Bootstrap 5, I have been exploring ways to automatically dismiss an Alert after a set duration using raw Javascript. Below is a snippet of my current approach. I believe there is room for optimization or a bett ...

javascripthtmlbootstrap-5

Why does one of the two similar javascript functions work while the other one fails to execute?

As a new Javascript learner, I am struggling to make some basic code work. I managed to successfully test a snippet that changes text color from blue to red to ensure that Javascript is functioning on the page. However, my second code attempt aims to togg ...

javascripthtmlcss

If the div is devoid of content, then remove the class

<div class="slider">content goes here</div> <div id="slider-2" class="active inactive">also some content here</div> <script type="text/javascript"> function checkEmpty( element ){ return !$.trim(element.html()) ...

javascriptjqueryhtmlcss

It vanishes as soon as you move your cursor away during the animation

I created a button component with text animation, but I'm encountering an issue. When I hover over the button, the animation works smoothly. However, if I quickly move my cursor away or unhover in the middle of the animation, the text disappears unex ...

javascriptcssreactjsnext.jsframer-motion

Unable to reinitialize the DataTable using Angular Datatable

I've been working on an Angular application that has a simple CRUD functionality. Initially, I tested my data with a static HTML table and everything was functioning as expected. However, I decided to implement a data table framework called Angular da ...

jqueryhtmlangulartypescriptdatatable

Place a picture and words within a submit button

I need assistance with aligning text and a small airplane image on a submit button. Currently, the text is overlapping the image and I am unsure how to fix this issue. How can I adjust the position of the text to display to the right of the button? Is ther ...

htmlcss

Creating multiple blocks with a 100% height in HTML

Is it true that a parent element must have a fixed height to use percentage-based height? For example, 500px. I'm designing a grid with divs arranged hierarchically. The parent has a fixed height of 500px, and the children have percentage heights, ea ...

htmlcssweb

Retrieve HTML content from a JSON object and render it on a web page

I am facing a challenge with decoding html that is in json format. I'm struggling to figure out how to retrieve my html and display it on a page. It seems like json_decode isn't the solution. Can anyone help me with this issue? Appreciate any as ...

phpjavascriptjqueryhtmljson

Could the absence of an external style sheet for CSS be hindering the execution of my code?

A generous Stack Overflow user provided me with the code you see here and their JSFiddle can be accessed at http://jsfiddle.net/f18513hw/. The code functions properly in JSFiddle. I copied and pasted the code into my Textpad, saved it in my htdocs folder o ...

javascriptjqueryhtmlcss

I'm feeling lost trying to figure out how to recycle this JavaScript function

Having an issue with a function that registers buttons above a textarea to insert bbcode. It works well when there's only one editor on a page, but problems arise with multiple editors. Visit this example for reference: http://codepen.io/anon/pen/JWO ...

javascriptcss

Is your Jquery validation malfunctioning?

I am currently facing a challenge with required validation on an asp.net page. In order to validate the inputs, I have implemented multiple controls which can be hidden or displayed based on certain conditions. These controls include checkboxlists, dropdow ...

javascriptjqueryhtmlasp.netcss

Refreshing a webpage to accurately display changes made in a CRUD application without the need for a hard reset

My to-do app is almost fully functional - I can create items, mark them as completed, and delete them using a delete button. However, there's one issue: when I delete an item, the page doesn't update in real-time. I have to manually refresh the p ...

javascriptpythonhtmlajax

Animation in CSS3: Blinking overlay block

I am interested in creating an element that will overlay a section of a webpage using position: absolute. The element should be 50% opaque and blink between red and transparent, similar to the way OSX used to do with default dialog buttons. Is there a way ...

htmlanimationcssbackground

Issues with styled-components media queries not functioning as expected

While working on my React project with styled components, I have encountered an issue where media queries are not being applied. Interestingly, the snippet below works perfectly when using regular CSS: import styled from 'styled-components'; exp ...

javascriptcssreactjsfrontendstyled-components

Is concealing content using Javascript or jQuery worth exploring?

While I have been hiding content using display:none; in css, there are concerns that Google may not like this approach. However, due to the needs of jQuery animations, it has been necessary for me. Recently, I have come across a new method for hiding conte ...

javascriptjqueryhtmlcss

HTML is appearing as unformatted text on the screen

I am utilizing deta for rendering cloud-based HTML content. Below is the code snippet in use: from deta import Deta from fastapi import FastAPI, Request, Response, Form, File, UploadFile from fastapi.templating import Jinja2Templates from fastapi.response ...

pythonhtmlfastapi

Is there a way to insert a button within a table that will allow me to easily insert new rows and columns?

<head> No content available at the moment. <!-- Here is my code --> <h1>Reserve Your Hall Form</h1> <form class="form-horizontal"> <table class="form-group table table-bordered table-hover"> ...

htmlasp.net-web-apiangular-ui-bootstrapbootstrap-4angular2-forms

I am adding the main stylesheet to the queue, but for some reason my images are not appearing

I'm in the process of converting HTML to a Wordpress theme. I've successfully enqueued the stylesheet, but unfortunately, some of the images are not displaying properly. It seems like it could be an issue with the subfolder structure. ...

htmlwordpresssubdirectoryenqueue