What is the best way to arrange data within the <th> tag to mimic a row layout?

Is there a way to align text within <th> tags of a table so that it appears in a row-like fashion, rather than up and down? I want the headings to be level with each other.

For example, titles like Americas Center, Asheville, ..., Coopersville should be displayed in one row; XX% in the second row; Eligible: xxxx in the third row; Registered: xxxxx in the fourth row.

The desired result should look like this:

How can I achieve this alignment in the <th> tags while keeping the background color consistent and without adding borders like the other rows have?

I have tried using <br/> tags to separate the text, but it doesn't give the desired aligned look. Is there a way to display data in <th> tags in a row-like format?

The code can be found here: https://jsfiddle.net/kirankapur/dka361qz/

htmlcss

Answer №1

Stop using line breaks for text alignment and instead wrap each set of elements in a table row using tr blocks for caption, Eligible status, and Registered status.

To prevent text wrapping, enclose it in a div and apply white-space: nowrap.

For borders, set border=0 and cellspacing=0 in the table tag or use CSS for customization.

Check out: https://jsfiddle.net/audetwebdesign/0rkvtncm/

Note: I provided color values for headers to demonstrate precise styling control.

More Styling: To add borders to table cells outside the header area, use the following CSS rules:

table.local tbody.table-hover td {
    border-top: 1px dashed blue;
}
table.local tbody.table-hover tr:last-child td {
    border-bottom: 1px dashed blue;
}

Remember, CSS border properties do not inherit. Apply them directly to td (or th) elements, not tr.

View the jsfiddle demo for added borders.

Answer №2

Implementing a UL-LI structure within will effectively address the problem.

View the code snippet below:

.table-fill {
  background: white;
  height: 320px;
  margin: auto;
  padding: 5px;
  width: 100%;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  animation: float 5s infinite;
}
table.local th {
  color: #FFF;
  ;
  background: #9ea7af;
  border-right: 1px solid #787E89;
  font-size: 17px;
  font-weight: 100;
  padding: 18px;
  text-align: left;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  vertical-align: middle;
}
table.local th:first-child {
  border-top-left-radius: 0px;
}
table.local th:last-child {
  border-top-right-radius: 0px;
  border-right: none;
}
table.local tr {
  border-top: 1px solid #C1C3D1;
  border-bottom-: 1px solid #C1C3D1;
  color: #666B85;
  font-size: 16px;
  font-weight: normal;
  text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);
}
/*tr:hover td {
  background:#4E5066;
  color:#FFFFFF;
  border-top: 1px solid #22262e;
  border-bottom: 1px solid #22262e;
}*/

table.local tr:first-child {
  border-top: none;
}
table.local tr:last-child {
  border-bottom: none;
}
table.local tr:nth-child(odd) td {
  background: #EBEBEB;
}
/*tr:nth-child(odd):hover td {
  background:#4E5066;
}*/

table.local tr:last-child td:first-child {
  border-bottom-left-radius: 0px;
}
table.local tr:last-child td:last-child {
  border-bottom-right-radius: 0px;
}
table.local td {
  background: #FFFFFF;
  padding: 15px;
  text-align: left;
  vertical-align: middle;
  font-weight: 300;
  font-size: 15px;
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
  border-right: 1px solid #C1C3D1;
}
table.local td:last-child {
  border-right: 0px;
}
table.local th.text-left {
  text-align: left;
}
table.local th.text-center {
  text-align: center;
}
table.local th.text-right {
  text-align: right;
}
table.local td.text-left {
  text-align: left;
}
table.local td.text-center {
  text-align: center;
}
table.local td.text-right {
  text-align: right;
}
table.local th ul {}
<table class="local table-fill">
  <thead>
    <tr>
      <th class="text-left">
        <ul>
          <li style="font-weight:bold;">Americas Center</li>
          <li style="font-size:20px">
            XX%</li>

          <li style="font-weight:bold;">Eligible: xxxx</li>

          <li style="font-weight:bold;">Registered: xxxxx</li>
        </ul>
      </th>
      <th class="text-left">
        <ul>
          <li><span style="font-weight:bold;">Asheville</span>

          </li>
          <li><span style="font-size:20px">
                            XX%</span>

          </li>
          <li><span style="font-weight:bold;">Eligible:</span> xxxx

          </li>
          <li><span style="font-weight:bold;">Registered:</span> xxxxx</li>
        </ul>
      </th>

      (Additional table rows and cells follow)
    </tr>
  </thead>
  <tbody class="table-hover">
    <tr>
      <td class="text-left">Irving</td>
      <td class="text-left">Louisville</td>
      <td class="text-left">Manchester</td>
      <td class="text-left">Marlborough</td>
      <td class="text-left">Memphis</td>
      <td class="text-left">Milpitas</td>
      <td class="text-left">Morgan Hill</td>
    </tr>

    (Additional table rows and cells continue)
  </tbody>
</table>

Answer №3

Update your CSS code for 

table.local th{
    vertical-align: middle;
}

to

table.local th{
    vertical-align: middle;
}

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

Setting the default <a-sky> in Aframe: A step-by-step guide

There was a fascinating projection I witnessed where two images were displayed in the sky. [https://codepen.io/captDaylight/full/PNaVmR/][code] Upon opening it, you are greeted with two spheres and a default white background. As you move your cursor over ...

javascripthtmlvirtual-realityaframewebvr

Mismatched Container Alignment in HTML and CSS

I am struggling to position the timeline next to the paragraph in the resume section, but it keeps appearing in the next section or below where it's supposed to be. I want the timeline to be on the right side and the heading/paragraph to be on the lef ...

htmlcsstwitter-bootstrapbootstrap-4

Add extra space to the dimensions of the div by incorporating padding

Showing my issue with an accompanying image: I am looking for a solution to include padding in the width: 50%; calculation. Currently, the first div's width is actually 50% + 2em because the padding was not factored in initially. Is there a way to i ...

htmlcsswidthpadding

Problem with Bootstrap 3 navbar on mobile devices - not tappable or responsive

After years of using Bootstrap, I've come across a new issue with my implementation of a Bootstrap 3 Nav. While testing on a desktop browser with device emulation, the nav collapses and functions properly. However, when tapping on the header on an ac ...

javascriptjqueryhtmlcsstwitter-bootstrap

Tips for displaying dynamic data using innerHTML

Recently, I set out to implement an infinite scroll feature in Angular 2 using JavaScript code (even though it may seem a bit unusual to use JavaScript for this purpose, it's actually working perfectly). Initially, I was able to create an infinitely s ...

javascripthtmlangularinnerhtml

Using php variable to pass data to jquery and dynamically populate content in jquery dialog

I am facing challenges trying to dynamically display MySQL/PHP query data in a jQuery dialog. Essentially, I have an HTML table with MySQL results. Each table row has an icon next to its result inside an anchor tag with the corresponding MySQL ID. echo &a ...

javascriptphpjqueryhtmlmysql

Enable automatic scrolling when a button on the previous page has been clicked

Imagine there are two buttons (Button 1 and Button 2) on a webpage (Page A). Clicking on either button will take you to the same external page (Page B). How can we ensure that Button 1 takes you to the top of Page B, while Button 2 automatically scrolls do ...

javascripthtmlcssscrollinitialization

Choosing descendant elements in CSS styling

Is there a way to select child elements in sequence? For instance: <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li> ...

htmlcss

Show a row of pictures with overflow capabilities

I am looking to develop my own image viewer that surpasses the capabilities of Windows. My goal is to design an HTML page featuring all my images laid out horizontally to maximize screen space. I also want the images to adjust in size and alignment as I z ...

javascripthtml

Encountering difficulty verifying custom-radio in bootstrap 4 using Parsley.js

I am currently using parsley for form validation on my <input> and <select> elements, and it is working perfectly. However, I am facing some issues when working with <input type="radio">. The problem is that only one option is being highl ...

htmlbootstrap-4parsley.js

Steps to retrieve specific text or table cell data upon button click

Greetings, I am a beginner in the world of html and javascript, so please bear with me :) My challenge involves working with a table in html. Each row contains a dropdown menu (with identical options) and a button. When the button is clicked, I aim to sen ...

javascriptjqueryhtml

Showing nested div elements in a single row

I'm currently dealing with a react component that generates nested divs. My goal is to make sure all the divs are displayed on the same line, but the catch is I can only apply styles to the outermost container div. Is there a way to achieve this witho ...

htmlcssreactjs

Is there a way to serve an HTML file using the response object in expressjs while also incorporating an external JavaScript file?

My express application successfully serves an HTML page from my disk when I initially make a GET request to "http://localhost:3000/" in the browser. Now, I am trying to access a JavaScript file that is located in the same directory on the disk as the HTML ...

javascripthtmlnode.jsexpress

How to center align a fixed div position

I am looking for a way to center align a fixed position div on my page. In the past, I have been able to achieve this with absolutely positioned divs using a specific technique. left: 50%; width: 400px; margin-left: -200px; However, this method does no ...

htmlcssalignmentcss-positioncenter

Is there a way to extract content from an HTML <span id> using Python, Selenium, and BeautifulSoup?

I've been working on a project to create a web scraping tool using Python, Selenium, beautifulSoup, and pandas to generate a .csv report. Unfortunately, I'm facing an issue with extracting the "data-date" text from the HTML snippet below. Specif ...

pythonhtmlpandasseleniumbeautifulsoup

Encountering issues with Html.ActionLink in Asp.net MVC when using Bootstrap Select

I am trying to implement a dropdown list for language localization on my website. However, when using <ul> tags with Html.ActionLink, the links are created with language codes as shown below: @{ var routeValues = this.ViewContext.RouteData.Valu ...

jqueryhtmlasp.netasp.net-mvctwitter-bootstrap

Tips on changing tabs by simply clicking the save button or linking the save button to tab-switching functionality

import { Component, OnInit, OnDestroy } from '@angular/core'; import { FormGroup, FormControl, Validators, FormArray } from '@angular/forms'; import { CustomValidators } from 'ng2-validation'; import { Busi ...

javascripthtmlangulartwitter-bootstrap

a guide on incorporating jQuery ajax requests with node.js

Although I came across a similar question on Stream data with Node.js, I felt the answers provided were not sufficient. My goal is to transfer data between a webpage and a node.js server using a jQuery ajax call (get, load, getJSON). When I try to do this ...

javascriptjqueryhtmlajaxnode.js

Greetings, username, following successful login

Upon first accessing the system, the user will be prompted to log in. If the login is successful, the user will be redirected to the index.php page; if not, they will be asked to re-enter their credentials. My goal is to have the username displayed on the ...

phphtmlauthentication

Currently, I am expanding my knowledge of PHP and MySQL by working on a dynamic form that utilizes arrays. As I progress through the project,

One of my recent projects involved creating dynamic rows in a form using code. I managed to save the data in an array and display it using a foreach loop, but I'm facing challenges when trying to insert this data into a database. Here's a glimps ...

javascriptphpcssmysql