Issue with color display inconsistency in webgrid across various segments

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

My goal is to display section status colors in a webgrid and divide them percentage-wise, but I am facing issues with some of the rows.

Here is the cshtml script for the webgrid section status:

webGrid.Column(header: "Section Status", format: @
    <table class="" cellpadding="5" cellspacing="0" style="width: 100%;">
       <tbody>
          <tr>
             <td id="inProgresswd" width="@item.InProgressPC%" title="@item.InProgressPC%"></td>
             <td id="respPendingwd" width="@item.ResponsePendingPC%" title="@item.ResponsePendingPC%"></td>
             <td id="revPendingwd" width="@item.ReviewPendingPC%" title="@item.ReviewPendingPC%"></td>
             <td id="acceptedwd" width="@item.AcceptedPC%" title="@item.AcceptedPC%"></td>
             <td id="rejectedwd" width="@item.RejectedPC%" title="@item.RejectedPC%"></td>
             <td id="ftReciverwd" width="@item.FwdToRecieverPC%" title="@item.FwdToRecieverPC%"></td>
          </tr>
       </tbody>
    </table>
    , style: "SectionStatus"),

The color should be displayed percentage-wise and if the percentage is zero, the color should not appear in the grid. In the image provided, only four status colors should appear as they have percentage values of 25. However, five colors are showing up for the highlighted row.

htmlcssasp.net-mvcgridwebgrid

Answer №1

table-layout: fixed can resolve the issue you are facing, although there might still be a 1px wide cell if you use the html width attribute instead of css. 

table {
  table-layout: fixed;
}

tr > td#inProgresswd {
  background: #faa;
}

tr > td#respPendingwd {
  background: #afa;
}

tr > td#revPendingwd {
  background: #aaf;
}

tr > td#acceptedwd {
  background: #ffa;
}

tr > td#rejectedwd {
  background: #aff;
}

tr > td#ftReciverwd {
  background: #faf;
}
<table cellpadding="5" cellspacing="0" style="width: 100%;">
  <tbody>
    <tr>
      <td id="inProgresswd" width="25%" title="25%"></td>
      <td id="respPendingwd" width="0%" title="0%"></td>
      <td id="revPendingwd" width="0%" title="0%"></td>
      <td id="acceptedwd" width="25%" title="25%"></td>
      <td id="rejectedwd" width="25%" title="25%"></td>
      <td id="ftReciverwd" width="25%" title="25%"></td>
    </tr>
  </tbody>
</table>

<br />

<table cellpadding="5" cellspacing="0" style="width: 100%;">
  <tbody>
    <tr>
      <td id="inProgresswd" style="width: 25%;" title="25%"></td>
      <td id="respPendingwd" style="width: 0%;" title="0%"></td>
      <td id="revPendingwd" style="width: 0%;" title="0%"></td>
      <td id="acceptedwd" style="width: 25%;" title="25%"></td>
      <td id="rejectedwd" style="width: 25%;" title="25%"></td>
      <td id="ftReciverwd" style="width: 25%;" title="25%"></td>
    </tr>
  </tbody>
</table>

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

Ways to prevent animations from displaying solely in IE

Is there a way to remove a keyframe animation if the browser is IE, while keeping it for Chrome, Safari, and FireFox? The animation I am referring to is defined as follows: // Animations @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } ...

css

Finding web page links from competition rankings using pattern matching

Challenge I am currently delving into the realm of natural language processing projects. Before diving in, I intend to explore existing works on datasets, particularly those organized on a leaderboard (refer to the "Three-way Classification" section). Ho ...

htmlbeautifulsoup

ShadowBox not displaying Vimeo videos

I can't figure out why my Vimeo videos are not appearing in a Shadowbox. I have followed the steps I know to be the simplest, which involve copying the example directly from the github page and then updating the shadowbox paths to match the locations ...

javascripthtmlcssshadowbox

Guidelines for showcasing a map on my website with the option for users to select a specific country

Is there a method to showcase a global map on my site and let the user select a country to receive relevant information? I am aware of embedding Google Maps, however, it includes unnecessary controls like zooming which I prefer not to inconvenience the us ...

javascripthtmlgoogle-mapsgoogle-maps-api-3

Rails: How come my personalized stylesheet isn't taking priority over the font family?

I have included the Skeleton boilerplate css in my application from this source. It can be found within the directory app/assets/stylesheets. app/assets/stylesheets ├── application.css ├── custom.scss ├── normalize.css └── skeleton ...

cssruby-on-railssasssprockets

Upon the initial hover, the data added to the title tag following an Ajax call is not appearing

I am currently working on an ajax request that retrieves information such as username, email, and user_id. Once the ajax call is successful, I use jQuery to append this data to the title tag. The main issue I am facing is that the data is only displayed af ...

javascriptjqueryhtmlcssajax

Guide to extracting and utilizing a JSON object received from the parent page

Hello, I've been searching online for quite some time and can't seem to find a solution to my question. If anyone could help, I would greatly appreciate it. Below is the code I am working with: <ion-content> ...

htmljsonangularjs

Achieving the desired display position in CSS3 with bootstrap: Steps to follow

I am attempting to create a unique icon by combining two different bootstrap icons together: https://i.stack.imgur.com/RWiQn.png Despite trying various margin adjustments like top and right, I have not been able to achieve the desired effect. Here is wha ...

htmltwitter-bootstrapcsspositionicons

The issue of overflowing scroll functionality appears to be malfunctioning

.main-content{ height: 100%; width: 60%; min-height: 800px; background-color: white; border-radius: 5px; margin-left: 1%; border: solid 1px black; } .profile-banner{ display: flex; flex-direction: row; justify-content: space-between; ...

css

Utilizing Inline Placement within Email Templates

Seeking assistance in finding an alternative method to achieve the desired functionality in an email template. Having trouble with inline position styling being removed. table { width: 80%; border-spacing: 0; } table tr td.label-dots { positio ...

htmlcssemailhtml-emailinline

inefficient performance in linking function within the visual aspect

I am working on an Ionic 4 with Angular app, where I have implemented websockets in my ComponentA. In ComponentA.html: <div *ngFor="let item of myList"> <div>{{ item.name }}</div> <div>{{ calcPrice(item.price) }}</div> ...

htmlangularperformanceionic4

Placing a div with absolute positioning inside another div with absolute positioning raises the question of how it functions when the outer div is not set to position: relative

Trying to grasp the concept, I experimented with the following setup: <div id="Outer"> <div id="Inner"></div> </div> In this scenario, the outer div has a relative position and the inner div has an absolute position. This allo ...

htmlcssposition

Angular 2: Dealing with Missing Image Loading

When viewing an HTML file containing the following code: <div> <img src="New-Google-Logo.png"/> </div> The image file New-Google-Logo.png is expected to load from the same folder as the HTML file. However, after running ng s ...

htmlcssangular

CSS - setting all child elements to the height of the tallest child element

Is there a way to ensure that both fieldsets have the same height as the tallest one? See the code snippet below or visit this link for reference: http://jsfiddle.net/zpcXQ/2/ <div id="parent"> <form> <fieldset id="left"> ...

htmlcss

styled-components: the parent's styles take precedence over the child's styles

image export const LogOutButton = styled.button` display: inline-block; .... `; export default styled(ThemedApp)` .... button { .... display: flex; .... } `; Upon inspection, it is evident that the Logout button (with class gBuhXv) ...

cssreactjsstyled-components

When selecting a new tab in HTML, the current page position remains unchanged. However, I would like the page to automatically scroll to the

In the design of my website, I have incorporated buttons that are linked to various pages using navigation tabs. However, when these buttons are clicked, the view maintains its position on the new page (e.g., halfway scrolled through the page). Instead o ...

htmlcss

Blocked the loading of scripts due to non-compliance with the Content Security Policy directive

Encountering an error with externally loaded scripts: Refusing to load the script 'https://code.jquery.com/jquery-3.4.1.slim.min.js' due to violating the Content Security Policy directive: "script-src 'self' https://ajax.googlea ...

javascripthtmlcsscontent-security-policy

My custom styles no longer seem to be applying after upgrading Angular Material from version 14 to 15. What could be causing this issue

Having some challenges with the migration from Angular 14 to Angular 15 when it comes to overriding material UI elements and themes. Looking for blog posts or documentation that can provide guidance on how to smoothly transition. Specifically, experiencin ...

cssangularangular-materialangular15angular-migration

Creating column gaps that remain consistent when resizing a webpage is essential for maintaining a clean and organized layout

Visit my current site [This is the HTML code for my website:][2] <div class="column-box" style="width: 100%"></div> <div id="column1" style="float:left; margin:15; width:33%;"> <p>Sara Adams<br> I am a Web Developer and C ...

htmlcss

Unable to vertically scroll on a position fixed element

I recently created a unique VueJS component that enables vertical scrolling. Within this component, there are two elements each with a height of 100vh. At the bottom of the component is a fixed position div. Interestingly, when I try to scroll down using m ...

htmlcssvue.jstailwind-css