What is the best way to use @foreach to make the text in the final row of a table bold?

Is there a way to apply bold styling to the text in the final row using @foreach in HTML?

I am looking to emphasize the total sum of each column by displaying it in bold text. While I initially considered creating a new table below the current one solely for displaying the totals, I would prefer a solution that allows me to incorporate the totals within the existing table.

Model

//This is the last row
foreach (DataRow item in current2.Tables[0].Rows)
{
    var cid2 = new SModel
    {
        Users = Convert.ToInt32(item["TotalUsers"]),
        Rows = Convert.ToInt32(item["TotalRows"]),
        Orders = Convert.ToInt32(item["TotalOrders"]),
        Customers = Convert.ToInt32(item["TotalCustomers"]),
        Quantity = Convert.ToInt32(item["TotalQuantity"]),
    };

    CASVList.Add(cid2);
}

View

<table>
    <thead>
    <tr>
        <th>Hour</th>
        <th>Users</th>
        <th>Customers</th>
        <th>Orders</th>
        <th>Rows</th>
        <th>Quantity</th>
    </tr>
    </thead>
    <tbody>
    @foreach (var item in Model.SModelObject.CSItem)
    {
        <tr>
            <td>@Html.DisplayFor(modelItem => (item.Text.Split(',')[0]))</td>
            <td><b>@Html.DisplayFor(modelItem => (item.Text.Split(',')[1]))</b></td>
            <td>@Html.DisplayFor(modelItem => (item.Text.Split(',')[2]))</td>
            <td>@Html.DisplayFor(modelItem => (item.Text.Split(',')[3]))</td>
            <td>@Html.DisplayFor(modelItem => (item.Text.Split(',')[4]))</td>
            <td>@Html.DisplayFor(modelItem => (item.Text.Split(',')[5]))</td>
        </tr>
    }
    </tbody>
</table>

Thank you for your assistance!

Answer №1

To achieve bold styling for all elements within the last row, apply a CSS selector to target it specifically:

tr:last-child {
  font-weight: bold;
}

Answer №2

If my understanding is correct, it seems like you are in need of code similar to the following:

table tr:last-child {
  font-weight: bold;  
}
<table>
  <tr>
    <td>Something</td>
    <td>Something</td>
    <td>Something</td>
  </tr>
  <tr>
    <td>Something</td>
    <td>Something</td>
    <td>Something</td>
  </tr>
  <tr>
    <td>Something</td>
    <td>Something</td>
    <td>Something</td>
  </tr>
</table>

Answer №3

1) One way to achieve this is through CSS styling

table tr:last-child {
  font-weight: bold;  
}

2)

If you prefer implementing the style within a foreach loop, you can use the following code snippet:

{ var countOfItems = Model.SModelObject.CSItem.Count;  //keep track of total items 
  var loopCounter = 1;                                 //initialize counter
}

@foreach (var item in Model.SModelObject.CSItem)
        {
            //check if it's the last loop and apply bold style accordingly
            <tr style="@{loopCounter == countOfItems ? "font-weight: bold":"" }">
                <td>@Html.DisplayFor(modelItem => (item.Text.Split(',')[0]))</td>
                <td>@Html.DisplayFor(modelItem => (item.Text.Split(',')[1]))</td>
                <td>@Html.DisplayFor(modelItem => (item.Text.Split(',')[2]))</td>
                <td>@Html.DisplayFor(modelItem => (item.Text.Split(',')[3]))</td>
                <td>@Html.DisplayFor(modelItem => (item.Text.Split(',')[4]))</td>
                <td>@Html.DisplayFor(modelItem => (item.Text.Split(',')[5]))</td>
            </tr>
          loopCounter+;
        }

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

How can I create a unique CSS or JS transition for a button that dynamically changes size based on text

My Angular app features a button labeled with "+". When the user hovers over it, I use element.append(' Add a New Number'); to add the text "Add a New Number" next to the + sign in the label. Upon clicking the button, a new number is added and ...

Looking for a solution to fix the VueJS calculator that only works once?

My calculator project using VueJS, HTML and CSS is almost complete. However, I'm facing an issue where it only works once. For example, if I input 6x3, it correctly gives me 18. But if I then clear the result and try to input a new calculation like 3 ...

Trigger a function in AngularJS when a div is scrolled to within a specific number of pixels from the bottom of the screen

I am experimenting with the AngularJS infinite-scroll directive. Below is the code snippet: angular.module('infiniteScroll', []) .directive('infiniteScroll', [ "$window", function ($window) { return { link:funct ...

Positioning JQuery tooltips

I've been developing a simple tooltip tool (check out the fiddle link below), but I'm encountering some issues with positioning. My goal is to have the tooltip appear centered and above the clicked link, however right now it appears at the top le ...

The true meaning of CSS3 transition is often misconstr

I'm trying to create a simple linear transition effect, but for some reason it's not working. Any suggestions on what might be causing the issue? HTML <div class="button-modern" style="background-color:#e73032"> <span style="color: ...

Searching for a div table using XPATH in Python

Struggling to extract data from a table using Selenium in Python. Any suggestions on how to achieve this? https://i.stack.imgur.com/rPlKR.png <div class="js--property-table-body project-property-table__body"> <span aria-hidden=&quo ...

Preventing Adjacent Text from Moving Due to a Floated i Element

I have a div with a bootstrap icon positioned at the top right corner. However, I want to center the text horizontally without shifting the position of the icon. Is there a way to achieve this? See my sample code here: https://jsfiddle.net/x1Lvyu6t/3/ ...

Display the current position of the caret in a field that cannot be edited

Can a virtual caret be displayed between two letter boundaries in HTML/CSS/JavaScript, for example in a regular div without using contenteditable=true? Imagine having the following: <div>Hello world</div> If I were to click between the "w" a ...

What is the best way to retrieve the href and id values dynamically from a card in React JS?

Hello everyone, I'm new to stackoverflow and still in the process of learning how to code. Please bear with me if this question sounds like a newbie one. My question is about having dynamic values for href and id when mapping data using axios to crea ...

Tips for aligning a radio button and label on the same line without breaking the layout in HTML and CSS

I'm encountering a problem with positioning an HTML radio button alongside its label. When the label text is too lengthy, it ends up wrapping below the radio button instead of staying on the same line. Here is the html: <div class="form-check ...

Issues with displaying images in CSS when using HTML 5 canvas drawing

In attempting to draw an image on a canvas using a pre-loaded image and CSS, such as: img.style.backgroundColor="red"; ctx.drawImage(img,0,0,100,100); I have observed that the image is drawn without incorporating the CSS modifications. Are HTML canvases ...

Tips for accessing the height property of an image

Is there a way to determine if an image lacks the height style property? Exploring CSS in HTML <img id="image" src="images/sports/sports9.png" style="width:100px"> Using jQuery if($('#image').css('height') == 0) { var ima ...

Troubleshooting a problem with HTML table styling

Could someone please help me identify the issue with this code snippet? I am aiming to style the table with a border, background color, and align it to the top. I appreciate any assistance. Thank you. <td style="border: solid 2px #111111;" bgcolor="#d ...

To determine the class of an element and reveal its parent if the class is present

Typically, the parent element remains hidden by default. However, upon clicking a specific element, its child might gain a class called "selected". How can I check for this class and then display the entire list if it is present? <ul style="display: ...

Include brand logo to the Bootstrap navigation bar

Following the method provided in Bootstrap documentation, I included the following code: <div class="container"> <a class="navbar-brand" href="#"> <img src="/img/hangers.jpg" alt= ...

Adjusting the size of HTML checkboxes for creating PDF documents

Currently facing a dilemma. When it comes to resizing checkboxes in HTML, the common recommendation is to use JavaScript to prompt the browser to adjust the size of the elements. However, in our scenario, we rely on wkhtmltopdf, a command line tool that u ...

Discovering the amount of attributes possessed by an element with jQuery

If I have an xml element like this: <fruit color="blue" taste="sweet" shape="round"></fruit> Without using jQuery, I could use the following code: fruit.attributes.length How can I achieve the same result with jQuery? ...

The placement of the content in the Grid system seems to be off-kilter, not aligning properly with Bootstrap standards

I am facing an issue with the logo and navbar layout in my design. The design has 3 columns for the logo and 6 columns for the navbar, as shown in this image: https://i.stack.imgur.com/RpmJm.jpg However, when I run the code, they do not appear in the cor ...

Creating a bordered triangle using only CSS

Looking to create a message holder with a triangular tip bordered shape? I've successfully crafted the tip using two triangles: #triangle-border { width: 0px; height: 0px; border-style: solid; border-width: 0 100px 80px 100px; bor ...

Using the <a> </a> tag for navigating within the code logic

Currently, I am utilizing the <a> tag for clicking and navigating, as shown in the code snippet below. I am looking to navigate this code using the C# tag in the page_prerender event, based on the selected id. Can anyone offer assistance with this? ...