Can different table headers be inserted under a Colspan?

I have been attempting to insert text above each column in Colspan without success. https://i.sstatic.net/MxQPj.png shows the image of how I want the columns in colspan to be displayed as 1 2 3 4 5 O, but I am unsure of how to achieve this. Here is an example of my code:

<thead>
    <tr>
        <th width="30%">
            @DbResHtml.T("Натпреварувач", "Resources")
        </th>
        <th  width="1%">
            @DbResHtml.T("Бр.", "Resources")
        </th>
        <th width="1%">@DbResHtml.T("ВИ", "Resources")</th>
        <th width="1%">
            @DbResHtml.T("П.", "Resources")
        </th>
       <th colspan="6" scope="colgroup">
            @DbResHtml.T("Грешки", "Resources")<br>
            @DbResHtml.T("12345O", "Resources")
        </th>
    </tr>
</thead>

Tbody code is not included for clarity.

htmlcssbootstrap-4html-table

Answer №1

It seems like there may be some confusion with your question. If you are trying to display text above each column, using a colspan may not achieve the desired result. Instead, you should consider splitting the columns into separate elements.

<thead>
<tr>
    <th width="30%">
        @DbResHtml.T("Player", "Resources")
    </th>
    <th  width="1%">
        @DbResHtml.T("No.", "Resources")
    </th>
    <th width="1%">@DbResHtml.T("VIP", "Resources")</th>
    <th width="1%">
        @DbResHtml.T("Points", "Resources")
    </th>
    <th>@DbResHtml.T("Goal", "Resources") <br>
        @DbResHtml.T("1", "Resources")
    </th>
    <th>@DbResHtml.T("Assist", "Resources")<br>
        @DbResHtml.T("2", "Resources")</th>
    <th>@DbResHtml.T("Tackle", "Resources")<br>
        @DbResHtml.T("3", "Resources")</th>
    <th>@DbResHtml.T("Shot", "Resources")<br>
        @DbResHtml.T("4", "Resources")</th>
    <th>@DbResHtml.T("Kick", "Resources")<br>
        @DbResHtml.T("5", "Resources")</th>
    <th>@DbResHtml.T("Run", "Resources")<br>
        @DbResHtml.T("O", "Resources")</th>
</tr>
</thead>

Since you are working with a database, you could separate the strings into arrays and use a loop to generate each character in the array.

I hope this explanation helps.

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

align-content and justify-content in flexbox are not producing the desired results

align-content and justify-content don't appear to be working when I test them in both Chrome and Firefox. I'm puzzled as to why they're not functioning as expected. #container { display: flex; flex-wrap: wrap; justify-content: cent ...

htmlcssflexbox

Guide to developing a manual tally counter with recorded logs using HTML and JavaScript

I am currently in need of assistance with creating a manual input counter using the App Script Editor. My website design already includes a single input textbox, a reset button, and a disabled box. What I would like to achieve is that when I enter a numb ...

javascripthtmlgoogle-apps-script

CSS - Struggling to center an element with absolute positioning in IE

I have created a layout with 3 div elements. The first parent div has a css property of position relative and is taking up the full width of the viewport. The second child div has an absolute position to cover the entire area of the parent. The third child ...

htmlcssinternet-explorer

Using PHPMailer to send an HTML page via email

I am attempting to email this HTML page using unlayer.com. I have tried using $mail->isHtml(true), ... msgHtml... but the email client keeps showing the code instead of the HTML page. Any suggestions on how to fix this? Here is my code: $sql = "SE ...

phphtmlemailphpmailer

What is the best way to ensure a jQuery UI slider recognizes when the mouse is released after being clicked?

I have integrated the jQuery slider into my application and am facing an issue with triggering an event to update the database upon releasing the slider. Currently, I am using the following code snippet: $('.ui-slider-handle').mouseup(function () ...

javascripthtmljqueryjquery-uijquery-events

Creating a full-height application with CSS3 Flexbox and managing overflow

I'm currently working on an app that utilizes a traditional email layout similar to the one illustrated below. Using the new CSS3 flexbox model, everything was functioning perfectly until I added the feature for users to dynamically insert new items ...

cssflexbox

View 360-degree panoramas on an iPad using the krpano HTML

I am currently experimenting with the KRPano HTML5 panorama viewer for a specific page on tablets/iPads. The flash viewer works seamlessly on desktops: embedpano({ swf: "/Files/Flash/krpano.swf", xml: "/Files/Flash/view.xml", target: "panview", id: "krpan ...

javascripthtmlipadkrpano

Maintaining an even distribution of flex children on each line as they wrap to the next line

I am curious about finding a way to maintain an even distribution of elements on each line, including the last one, using flex-wrap or any other flexbox technique. For example, let's say I have a flexbox with 6 elements. When it wraps, I would like t ...

htmlcssflexbox

Adjust the size of the div menu according to the window's dimensions

Is there a way to make a menu that will resize both the width and height of the window? I've managed to resize the width using %, but for some reason, the height isn't cooperating. I've experimented with max-width/height settings and tried ...

htmlcss

Having trouble finding rows to manipulate in an HTML table generated using jQuery csvToTable?

As a beginner in programming, I find myself seeking assistance with a particular issue. I have successfully read a CSV file stored locally and transformed it into an HTML table using jQuery csvToTable http://code.google.com/p/jquerycsvtotable/. Additional ...

jqueryhtmlhtml-tabletablesorterimport-from-csv

Use ngFor to align items to the left in your design

I am working on a div element where I need to dynamically add inputs that should form a number with a specific format. To ensure the inputs start from the left, I have applied the justify-content-end class. HTML: <div class='row justify-content-end ...

htmlcssangularbootstrap-4ngfor

yii2 truncates CSS classes in the email templates

My email sending process involves using a template: $content='Message'; Yii::$app->mailer->compose('@app/mail/templates/templ', ['content'=>$content]) ->setFrom('<a href="/cdn-cgi/l/email-protection" c ...

htmlcssemailyii2swiftmailer

Is there a way to efficiently retrieve and handle multiple $_POST records in PHP simultaneously?

I am currently working on developing a management interface that allows administrators to make bulk edits to members of a website all at once. While we already have the capability for single edits, there is a need for an option to modify all users simultan ...

phphtmlarrayspost

Generating an Xpath for the selected element with the help of Javascript or Jquery - here's how!

On my website, I have implemented a click event on an element. When a user clicks on this element, I want to generate the XPath of that particular element starting from either the html or body tag, also known as the Absolute Xpath. For example, if I click ...

javascriptjqueryhtmlxpath

The progress bar in Java Script is static and cannot be customized to change colors

Trying to use HTML for image uploads and I've created Java code to monitor the progress of the upload. However, I'm facing an issue where I cannot change the color of the progress loading bar. Below is the code I am currently using for uploading ...

javascriptphphtml

Struggling with transferring information up the React component hierarchy to manipulate the Document Object Model

** I'm still learning React, so any assistance is greatly appreciated! ** A Little Background I have a modal (bootstrap4) hidden within the main app component, containing a form. The form is automatically filled with information from the selected re ...

javascriptjqueryreactjsreact-reduxbootstrap-4

css: centrally align a collection of items that are spaced evenly throughout the group

I have multiple divs inside a container that I want to evenly distribute horizontally: [container [obj1] [obj2] [obj3] [obj4] ] Additionally, I would like the container to be centered on the page My current CSS (stylus) code for the container is as foll ...

htmlcssflexboxstylus

Positioning a span to be below an input field

Below is the code for a Blazor component that includes a textbox which can be edited with the click of a button. @if (_editing) { <div class="floatingbox position-relative"> ...

cssbootstrap-4blazor-server-side

Challenges arise when creating a complementary php script for a natural language form

I'm a beginner at this and all the PHP I've tried hasn't been successful. I've come across examples of Natural Language forms, but none with functional PHP. While I am familiar with PHP in traditional forms, integrating the two has been ...

phphtmlcssemailwebforms

Struggling to fetch a basic form field input using node.js and express

Currently, I am delving into Node.js with express and web development. For my inaugural project, I aim to craft a directory listing application. In my quest, I stumbled upon a captivating HTML form. Here's a snippet of the form's code: <form a ...

htmlnode.jsexpress