The width of the TD element does not affect the grid

<div id="unique-example" class="k-unique-content">


<table id="unique-grid" style="float: left; position: relative">
    <thead>
        <tr>
            <th width ="410px"data-field="UniqueFileName">Unique File Name
            </th>
            <th  width ="390px"data-field="UniqueID">Unique File Identifier
            </th>

        </tr>
    </thead>
    <tbody>
        @foreach (var uniqueItem in UniqueModel)
        {
            <tr >
                <td  class="unique-idRank" >
                    @uniqueItem.UniqueFileName
                </td>
                <td  class="unique-idRank2"  >
                    @uniqueItem.UniqueID
                </td>

            </tr>
        }
    </tbody>

I use external css

table#unique-grid.k-focusable td.unique-idRank
         { width:410px;
          }

but it doesnt apply and not able to wident by 410 px, any idea ? what other css method to do for me to get that applied

Answer №1

It is important to adjust the column widths in the table according to their intended size. In this case, both the first column and another one are given the same width of 310px and 290px respectively. However, it would be more appropriate to assign them widths that align with the overall width of the table.

Answer №2

Using Class .k-focusable in the CSS rule for

table#grid td.idRank
{ width:310px;}
is unnecessary.

The presence of .k-focusable is preventing the width from being applied correctly.

A better alternative would be:

table#grid .idRank
{ width:310px;}

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 place a DOM element without relying on style properties?

Before diving in, let me provide some context. I am currently developing a visual element that operates similar to a spreadsheet. It features scrollable content areas in both directions, with axis indicators on the left and top that remain visible at all t ...

How can one set relative paths for links when including a file from a different directory that contains links?

My project directory is structured as follows: root css img src login login.php dashboard basic header.php footer.php profile.php manage.php department ...

Page title missing from browser tab

I don't come from a design background, so the issue I'm experiencing is quite peculiar. Below is a snippet of code from MVC4 - <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-C ...

Discover a foolproof method for effortlessly examining an flv or mp4 file embedded within a webpage simply by

I've encountered a challenge with JavaScript. I can successfully check a flash object in a webpage when hovering over it, but I'm unsure how to achieve the same for flv or mp4 objects when either hovering over or moving away from them. Currently ...

Assistance with Ajax for content loading

Greetings, I am encountering an issue with the following code snippet (located in a js file named ajax.js) $(function(){ $("#loading").hide(); $("ul#nav a").click(function(){ page = "content/"+$(this).attr('href') ...

Refresh a div on an ASP MVC page with a controller action without the need to reload the entire page

In my controller, I have implemented the following action: public ActionResult TestItemLogistic() { ControlViewModel model = new ControlViewModel(); model.itemSelected = "Logistic"; return RedirectToAction("MenuList", model); ...

What is the best way to add a value to the value attribute of a div using JavaScript?

Is there a way to insert a value into the value attribute of a div using Internet Explorer 9? I have attempted various JavaScript functions, but so far I can only modify the content inside the div and not the value attribute itself. <div id="mydiv" val ...

Using jQuery to select the child element of the parent that came before

Recently, I've been experimenting with creating animations using CSS and jQuery. While it has been successful so far, I'm now looking to take it a step further. Specifically, I want information to appear on top of an image when the user clicks on ...

How to Make a React JS Component Shift to the Next Row as the Window Shrinks

I am facing an issue with the layout of my product detail page. Currently, I have two components - an image gallery on the left and product information on the right. However, when the window size gets smaller, I want the product information component to mo ...

Ways to adjust dimensions depending on zoom level or screen size

Here is the HTML code snippet: <div id="divMainFirst"> <div id="divInnerFirst"> <div id="divTitleHeaderUC"> <span id="spanTitleHeaderUC">Urgent Care Wait Time</span> </d ...

The bubble dialogue box in my picture

Looking to create a panel with images that, when clicked on, display an info window similar to Google Map's pin maker. When you click on an image, a balloon should appear containing additional information. Check out this example <a id="infowindow ...

What is the process for accessing an image via localhost on the same computer?

I created a program that saves images locally and stores their URLs in a database. When retrieving this data via ajax, the URLs are fetched and appended to a div class using the following code: $( document ).ready(function() { $.ajax({ url: "/ ...

Pair objects that possess a specific attribute

I have a HTML snippet that I want to modify by adding the CSS class HideEdit to hide specific columns. <th class="rgHeader" style="text-align: left;" scope="col" _events="[object Object]" control="[object Object]" UniqueName="Edit"> This particular ...

Calling ASPX method remotely and receiving undefined data

I'm still fairly new to ASP.NET and web services. I've encountered an issue where I am calling a web service from a *.aspx page, and the web service is returning the correct output. However, when I call the *.aspx method from an external HTML pag ...

capturing the selected value from a dropdown menu upon form submission

Take a look at this HTML form: <form id="form1"> <select name="date" class="form-control"> </select> <input type="submit" name="submit" id="submit" value="Save" onclick="SubmitForm('#form1', 'editcustomer_callu ...

Header text aligned with image to accommodate parent size

Having trouble aligning an image/logo next to my header text while maintaining its aspect ratio and fitting within the container size. The goal is to have both the text and image horizontally centered. The parent div cannot have a fixed height as it needs ...

Change the class of each item in a list individually by hovering over them with the mouse using JavaScript

How to toggle classes in a list item one by one using the mouseover event in JavaScript? const items = document.querySelectorAll("ul li"); let currentItem; for (const item of items) { item.addEventListener("mouseover", e => { currentItem &am ...

Is there a way to verify the selection of all mandatory fields prior to concealing a div?

var count = 2; $('.next').click(function() { var requiredField = true; $(this).siblings('table').find('tbody tr:nth-child(' + count + ') td').each(function() { var element = $(this).find('center').f ...

Utilizing loop variables in ng-class and ng-click directive

This piece of code generates a list consisting of seven thumbnails, with the currently active image designated by the active and thumb classes. <div ng-repeat="no in [1, 2, 3, 4, 5, 6, 7]"> <img ng-src="images/{{no}}t.jpg" class="thumb" ng ...

What could be the reason for the malfunction of the min value in my Material UI date textfield?

I am attempting to set a minimum date for the picker to start from, but it does not seem to be working as expected. <TextField id="date" type="date" defaultValue="2017-05-24" minDate="24/01/2019" ...