Tips for vertically aligning values in a Bootstrap table

Currently, I am working on generating reports for an NGO that conducts surveys in schools. Once the reports are created, they need to be sent out in a specific format. While a simple table structure would suffice, I have decided to use Bootstrap classes to style the tables, with a focus on vertical alignment of text within the reports.

I have looked into various resources for information on vertical columns and design, but unfortunately have not found any relevant solutions. I would greatly appreciate any assistance in achieving my goal of aligning the proj#, proj code, proj name, and proj goal columns centered vertically like the image provided at this link: https://i.sstatic.net/piWEf.jpg

At present, this is what I have developed for them: https://i.sstatic.net/kf4re.png

htmlcsstwitter-bootstraphtml-table

Answer №1

To optimize your layout, consider using a table layout for this particular purpose. If you're transitioning away from tables, utilizing a for loop or while in your code may be beneficial. Create an array or MySQL table to retrieve values from the database. It's advisable to maintain your data in a database rather than relying solely on Bootstrap or table classes. However, keeping a table layout is still recommended due to its flexibility. Check out this tutorial for more information: MySQL PHP Tutorial

To rotate text using CSS, you can use transform: rotate(90deg);

.vertical-text {
    transform: rotate(-90deg);
    transform-origin: left center 0;
    padding-top: 50px;
}

<td rowspan="2">

Replace the value of rowspan with the row count retrieved from the database. This will ensure that your table appears correctly with properly merged columns.

Learn more about rowspan here: How to Use Rowspan and Colspan

Take a look at this fiddle for a demonstration: HTML Table Fiddle

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

What methods can be used to disable the back button functionality within an iframe?

I am facing an issue with embedding YouTube links on my webpage using iframes. When a user clicks on the link, it plays the video in the iframe. Below is the HTML and jQuery code I am using: HTML: <a href="http://www.youtube.com/embed/Q5im0Ssyyus"> ...

javascriptjqueryhtmliframeattributes

Certain Font Awesome icons are not displaying properly in HTML

Currently facing an issue while developing my BlogApp. The problem at hand :- Attempting to utilize font awesomes fas fa icons, but some of them are not displaying properly. For example, class="fas fa-crown". When trying to access fas fa-crown ...

javascripthtmlfontsfont-awesome

Top of screen not showing NAV menu

Is there a way to keep my main navigation menu fixed at the top of the page? I have both a hamburger nav menu that pops up when clicked and an embedded page nav menu. I want the hamburger nav menu to always stay on top, but for some reason, the embedded n ...

htmlcss

Incorporate a jQuery userscript on Firefox that includes a link to a form

Attempting to incorporate a search link into an online form using a userscript with jQuery, specifically for Firefox. I typically work in Chrome, so I'm encountering some challenges with compatibility in Firefox. However, I need this to be functional ...

javascriptjqueryhtml

What causes jquery to not trigger PHP when the HTML file resides in a different location?

In my project structure, I have a 'js' folder containing the jQuery function and a PHP script. The HTML file is located in a separate folder. Currently, the setup looks like this: /server/js/global.js /server/js/script.php /server/html/stude ...

phpjqueryhtmlhyperlink

Arrange CSS to distribute list items across two rows with an unlimited number of items

I need my list items to be arranged in 2 rows like the following: item 1 item 3 item 5 item 7 item 9 .... item 2 item 4 item 6 item 8 ...... My CSS skills are not great, so I am struggling to find a solution for this. I have at ...

htmlcsslist

Anomaly in SVG Animation Performance

My SVG animation was going smoothly until the final element, which unfortunately ruins the entire thing. What I've created is a hexagon composed of 6 individual triangles, designed to fold out and back in on a continuous loop for use as a loader anim ...

htmlcssanimationsvg

"Can you guide me on how to display a React component in a

I have a function that loops through some promises and updates the state like this: }).then((future_data) => { this.setState({future_data: future_data}); console.log(this.state.future_data, 'tsf'); }); This outputs an array o ...

javascripthtmlreactjsrender

The appearance of the website varies across different web browsers

My current project involves creating a portfolio showcasing my work, but I've encountered an issue: When you visit my website and click on the "About" link, the text at the bottom of the tab is displayed differently in Chrome compared to IE and Firef ...

jqueryhtmlcsscross-browser

Switch out fontawesome icons for SVG icons

I'm looking to replace the Fontawesome icons on this template. The full HTML code is available here, but I only need to swap out one specific icon with an SVG. https://i.sstatic.net/k1DFZ.png <div class="col-md-4"> ...

htmlsvgiconsbootstrap-5font-awesome-5

Customize button design with data from API request

I am currently working on a project to showcase the status of multiple servers within a cluster. To achieve this, I have established a status route in my web service that returns 'ok' if the server is functioning correctly and an error message if ...

jqueryhtmlcss

Guide to launching a web browser within a Phonegap app with a button click event

We are developing a PhoneGap application using HTML and JavaScript. Our goal is to integrate PayPal's website so that users can make payments with a simple button click event within the app, and then seamlessly return back to the application afterward ...

javascriptandroidhtmliphone

How come the font size doesn't transfer from the div element to the table element?

I am experiencing an issue with my document presentation. The document is simple and includes HTML and CSS code as well as some text content. When I render the document, I notice that the table element does not inherit the font size from its parent div, un ...

htmlcss

Ways to retrieve parameters using $_GET

I am having trouble retrieving the parameter $_GET with a value that contains the character: '#'. Here is the code I am using: <iframe src="http://localhost/wp352/wp-content/plugins/heloworld/templates/options-rte.php?text_content=<span s ...

phphtmlutf-8

Can we use ToggleClass to animate elements using jQuery?

I have a section on my website where I want to implement an expand feature. I am currently using jQuery's toggleClass function to achieve this effect. jQuery('.menux').click(function() { jQuery(this).toggleClass('is-active&a ...

javascriptjquerycss

"Fixing the Vertical Order of Divs with Jquery: A Step-by-

Before I completely lose my mind, I need some help with a coding issue. Right now, I have two initial divs displayed. The user should be able to add these divs below the original ones as many times as they want, or remove them if needed. I've been att ...

javascriptjqueryhtmlcssdraggable

What is the best way to address the problem of quotes while utilizing Freemarker in conjunction with ckEditor (or any other html editor

Consider this scenario within my template: ${(object.attribute)!"default text"} At times, quotation marks are necessary, such as when FreeMarker is handling null dates and similar instances. The issue arises when my HTML editor automatically transforms ...

javahtmltemplatesckeditorfreemarker

What is the method for formatting within the <textarea> element?

While working on developing a comment system, I recently made the discovery that text areas cannot be formatted to retain paragraphs, line breaks, etc. This was particularly noticeable when comparing sites like StackOverflow, which uses a text editor inste ...

javascripthtmlforms

Is there a way to determine the length of a variable containing a mixture of characters in HTML and PHP?

Let's say someone wants their username to be GreenApples-72. How can you determine the number of letters, numbers, and symbols in the username and add them together? if((($_POST['username'])<'2')) // Checking if the length of t ...

phphtmlvariables

"Error: The .cssText method in Javascript is not working properly

I have been encountering an issue where the .cssText is not updating the HTML element referred to as .unveil. I implemented an event that when the container for .unveil is clicked, the .unveil element should become visible. However, upon clicking the .unve ...

javascripthtmlcssweb