Creating a Kendo Grid that mimics the appearance and functionality of an

Can someone help me with styling my Kendo grid to match the look of a basic HTML table? I want to use the table style I already have set up instead of the default Kendo style. Is there a way to achieve this?

#resultTable th {
    cursor:pointer;
}

#resultTable .table th, #resultTable .table td {
    font-size: 14px;
    font-family: 'Open Sans';
    color: #484848;
}

#resultTable td > a {
    font-size: 14px;
    font-family: 'Open Sans';
    color: #2D4B69;
}

Check out the demo https://jsfiddle.net/tjmcdevitt/pqda6v1y/13/

cssbootstrap-4kendo-uikendo-grid

Answer №1

Achieving a consistent look for both tables is possible, but it will require significant CSS modifications. Incorporate the provided CSS example into your code to get started in the right direction.

.k-grid-content .k-alt {
   background-color: transparent;
}

.k-grid-content .k-alt:hover {
   background-color: transparent;
}

.k-grid td,
.k-grid-header th.k-header,
div.k-grid-header,
.k-grid-header-wrap,
.k-widget {
  border-style: none;
}

By implementing the above CSS adjustments, your Kendo grid will begin to resemble your initial table. Keep in mind that more CSS changes will be necessary to fully align the appearance of both tables.

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

The jQuery function for $(window).scroll is not functioning as expected

My challenge is getting the scroll to reveal my scrollTop value I've been working with this code: $(document).ready(function(){ console.log('Hello!'); $(window).scroll(function(){ console.log('Scrolling...'); var wScroll = ...

javascriptjqueryhtmlcss

textarea label align: center

I've been struggling to center-align the label for this textarea within the text box, but so far my attempts have failed. The resulting display resembles the following: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxx ...

htmlcsstextareavertical-alignment

How can I prevent a child div from activating the hover effect on its parent div?

I am currently exploring how to create a child element with position: absolute that is placed outside of its parent element without triggering the parent's :hover effect. Despite the parent having a hover effect, the child elements will still activat ...

htmlcssinheritancehover

`The height attribute of the textarea element is not being accurately adjusted`

When I tried to match the width(178px) and height(178px) of my table to the width and height of a text area upon clicking a button, I encountered an issue. While setting the width works perfectly fine, the height is being set to only 17px. It seems like ...

javascripthtmlcss

Ensure that the content remains centered within absolutely positioned DIVs inside the parent container

Imagine a scenario where you have a container with a fixed width and centered. Inside this container are two DIVs that are position relative to the window, placed side by side. The content inside these DIVs should ideally be centered, aligned with the cont ...

htmlcsscss-position

Creating Static Content using Spring Framework

I need some help with handling static content in my SpringMVC app. Currently, I am using the following configuration: <mvc:resources mapping="/resources/**" location="/resources/" /> This setup works well for uploading and retrieving images within ...

cssspringmodel-view-controller

Encountering issues with loading styles in Vue single file components

While working on my project at this link, I encountered an issue with displaying a styled modal. Despite trying to import the styles using: <style scoped> @import "../styles/modal-style.css"; </style> and even directly pasting the co ...

javascriptcssvue.jsvuejs2vue-component

I'm currently experiencing a challenge with a project I'm tackling that specifically deals with chart.js

In my recent coding project, I created a script to gather user input and then present it in various chart formats. However, upon executing the code, the selected chart fails to display after inputting values and clicking on the "generate chart" button. Her ...

javascripthtmlcssnpmchart.js

Automatically resize ui-select dropdown box to the left side

I've been tasked with incorporating AngularJS ui-select into my project, specifically creating a multiselect dropdown. Currently, the dropdown box automatically adjusts its width based on the length of the longest selectable text, causing it to extend ...

javascripthtmlcssangularjsui-select

Are you searching for a stylish tabbed navigation menu design?

I am searching for a tabbed navigation menu specifically designed to showcase images as the tab items. Here is an example of what I have in mind: <div class="menu"> <a href="#"> <img src="images/Chrysanth ...

jquery-uicss

How about this: "Leveraging the power of #IEroot to achieve a

Has anyone successfully implemented the IE CSS hack #IEroot? I came across it while reading this informative article, but unfortunately, it doesn't seem to be working for me. I'm currently trying to resolve an inline styling bug in order to achi ...

cssinternet-explorer

What are the best ways to create a responsive login form?

After recently beginning to learn HTML and CSS, I have encountered some confusion. Take a look at this table design for screens under 500px, and then compare it to how it should appear on screens 500px or larger. I believe utilizing a media query may be t ...

htmlcssresponsive-design

Which specific divs should I assign an ID to within the class?

Is there a way to apply the gray box style to specific divs instead of all of them? Should I include an id somewhere in the code? <!DOCTYPE html> <html> <head> <style> div { width: 320px; padding: 10px; border: 5px soli ...

htmlcss

Is it feasible to navigate through submenus using only the [Tab] key in CSS?

Is there a way to activate a submenu in a styled menu using only the [Tab] key so that the submenu becomes visible? I attempted to use the :focus pseudo-class ul li a:focus + ul li a ... and when t ...

htmlcssfocusaccessibility

Button styles that have been verified will not be shown in Firefox

Hello, first time poster here! Client specifications for CSS: button { border: 1px solid #B8B7B8; border-radius: 8px; height: 4em; margin: 25px 2px 25px 0; text-align: center; text-decoration: none; width: 4em; } button:active, button:che ...

cssfirefoxbutton

Trouble with closing Bootstrap 4 modal

My Bootstrap 4 modal is causing issues as it pops up on button click but won't close unless I refresh the page. I've been attempting to get it to close by clicking the 'close' button or simply by clicking anywhere on the main page body. ...

javascripthtmlcssbootstrap-4

The hidden absolute positioned div disappears once the sticky navbar becomes fixed on the page

Whenever my navbar reaches the top of the screen, the links in the dropdown menu disappear. I followed tutorials and examples from w3schools to build my webpage. Specifically: howto: js_navbar_sticky howto: css_dropdown_navbar This code snippet exempli ...

javascripthtmlcssmenusticky

When the mouse hovers over DIV2, the background image of DIV1 will be replaced

I have a full-screen background div with the ID #background-change. Within that full-screen background, I have 3 Divs named .fullscreen-column-1, .fullscreen-column-2, etc. My goal is to change the background image of #background-change when the mouseove ...

javascriptcssbackground-image

Lower the placement of Glyphicons

I have recently implemented a custom font on my website. Unfortunately, this font is not standard and its alignment is off. As a result, when I use this font with Twitter Bootstrap glyphicon, they do not appear in the same line. Is there a way to adjust t ...

htmlcsstwitter-bootstrapglyphicons

Enhance the user experience with a personalized video player interface

I am facing difficulty in creating a responsive video with custom controls. While I understand that using a <figure></figure> element and setting the width to 100% makes the video responsive, I am struggling with making the progress bar also r ...

javascriptcsshtmlvideo