Utilizing inline border style on table cells with text inputs for enhanced design

I'm looking for a way to style certain <td> elements in my table to make them appear as text inputs within the cells. In the past, I would add an extra <div> or <span> inside the cell and then apply border, margin, and padding styles to achieve the desired look. However, this method is causing performance issues with the third-party grid component I'm using (kendo ui). Therefore, I need to find a way to directly style the cell element itself (<td> element) without adding any additional elements.

Simply giving a border style to the <td> element won't suffice because I specifically want these borders to be 3px or 5px thick. Otherwise, it will just blend in with the table borders and not resemble an input field.

Is there a way to apply inline borders like 3px padding to a specific <td> element without using JavaScript?

Attached is a screenshot of my current setup. I'm aiming for this display without any extra elements inside the cell:

htmlcss

Answer №1

To achieve this, you simply need to apply some CSS styling to the td elements

Check out this demo on JSFiddle

The HTML code: 

 <table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

The CSS style:

  td{
    background-color:#DDD;
    margin:3px;
    padding-left:10px;
    border-style: solid;
    border-width:1px;
    border-color: #AAA;
    border-radius:5px;
}
td:hover{
    border-color: #9ecaed;
    box-shadow: 0 0 10px #9ecaed;
}

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

What could be the reason behind the failure of this :after element?

I am facing an issue with the preloader on my webpage where the animation is not displaying as expected. The animation should appear on top of a dark black background before the page fully loads, but it seems to be missing. The CSS for the animation works ...

javascriptjqueryhtmlcss

How to modify the appearance of the md-tab-header component in Angular2

Currently, I am working on a project that was passed down to me by a former colleague. It is a gradual process of discovery as I try to address and resolve any issues it may have. One particular element in the project is a md-tab-header with a .mat-tab-he ...

cssangular

Calculate the total price using Jquery once selections have been made

I am looking to create a dynamic pricing feature where clicking on a checkbox will update the total price. The prices are calculated per day, so if days are added, the total should reflect that accordingly. Check out our demo here: http://jsfiddle.net/XqU ...

jqueryhtml

Providing the outcome in JSON format rather than HTML

Seeking assistance with calling and displaying a Java web service in ASP.NET Web API. How can I configure my ASP.NET Web API to display JSON data instead of HTML when run? Below are the relevant code snippets: DemoRestfulClient.cs public class DemoRestf ...

htmlasp.netjson

When utilizing JavaScript within an Electron application file that is linked with a script tag in an HTML document, there may be limitations on using node modules with

While working on my Electron application, I encountered an issue with referencing a node module using require within an HTML form that includes JavaScript. Specifically, I am having trouble integrating the 'knex' node module into my code. Here i ...

javascripthtmlelectron

Guide to upgrading from Bootstrap 2.2 to the newest version 3.2

I have an older project using Bootstrap 2.2 and I am looking to update it to Bootstrap 3.4 without having to change any code. Additionally, I want to incorporate the new features of Bootstrap 3.2. How can I effectively use both versions of Bootstrap with ...

csstwitter-bootstrap

Tips for utilizing a file name when using the move_uploaded_file function

I have a mission to produce a video and then transfer the video onto a file server. I am capable of creating the video, which is stored as a BLOB, and converting it into a file format. After that, my aim is to upload this file onto the server. The html a ...

phphtml

Why isn't it working? Looking for a script that adds a class when the element is empty?

I have a script that should add the class "leftmax" to the li element with id "spect" when the div element with id "tab2" is empty, but it doesn't seem to be working. Can someone provide some assistance? <script type="text/javascript"> $(funct ...

jquerycsstabsshow-hide

jQuery regex failing to display latest changes

I am running into some issues with my custom jQuery snippet that is supposed to dynamically display the results. Each H2 tag contains an image, and I want to ensure the image is positioned correctly next to the word "test." Here is the script in question: ...

htmljqueryregex

Making sure all items in the top row of Flexbox columns have the same height

Within my flex wrapper, I have multiple column components with various flex items inside. Each column displays content adjacent to each other. The challenge is to ensure that the top item in each column has an equal height, creating a row-like effect. I&a ...

htmlcssflexboxcss-grid

How to Retrieve Content from an iFrame Using jQuery?

I am facing a challenge with an HTML form that is directed to an IFRAME upon clicking "submit". The iframe then loads a page after the submission, which indicates whether the user-input data is valid or not. It simply displays on screen as "TRUE" or "FALSE ...

javascriptjqueryhtml

X-Ray Rendering in Three.js and Webgl

Looking to create an x-ray effect in three.js / webgl. Something like this: UPDATE I am seeking help on how to achieve a real-time render with the x-ray effect, instead of just a static image. This can be accomplished using shaders that modify density i ...

javascripthtml3dthree.jswebgl

Position two buttons on the right side of the text

Is there a way to align two buttons on the far right side of a block of text? I want all the content to be in line, with the text on the left and the buttons on the right. While I've found solutions for aligning one button, I'm struggling to get ...

htmlcssangular

What could be causing Media-Query to fail when using the max-width media feature?

I recently added a max-width media feature to my code, but for some reason, the colors aren't changing when the width is less than 300px. I've been trying to inspect elements on my laptop to troubleshoot the issue. Additionally, I've made su ...

htmlcssmedia-queries

Creating PNG images in a scripting language for web applications

Imagine giving your website user the ability to specify a radius size, let's say 5px, and in return receiving a PNG file with a circle of that radius. This question can be divided into two sections: In what language and using which technologies can ...

javascripthtmlcssimage-processingpng

Ensure that all `thead th` elements remain in a fixed/sticky position when using a data

I am facing an issue with my data table requirement. I need to have 2 thead elements in the table, both of which should stick when scrolling. However, only the last thead's tr stays stuck at the top while the first one gets hidden. Can anyone help me ...

htmlcss

The highlight_row function seems to be delayed, as it does not trigger on the initial onClick but works on subsequent clicks. How can I ensure it works properly right from the first click?

I developed an application using the Google JavaScript Maps API to calculate distances between addresses. I've encountered a bug where the row in the table is not highlighted on the first click, requiring a second click for the highlighting to take ef ...

javascripthtmlcssreactjsgoogle-maps

JavaScript - Fetch POST request is being terminated - Windows Error 10053

Seeking help for my JavaScript project course. The function is aborting during the fetch process. Chrome is the browser being used to test the project. It was intermittently "sending" before, but now it's not working at all. Had to run the app in Chro ...

javascriptpythonhtmldjangofetch

Creating beautiful prints with images

I have been tasked with developing an MVC C# application where the contents of a div are dynamically created using an AJAX call to fetch data from a database. Upon successful retrieval, the content is then displayed as a success message in JavaScript. Here ...

javascripthtmlcssajax

Header and Footer with auto-sizing Body that scrolls

My structure consists of a Header, Body, and Footer <div id="my-element"> <div id="header">...</div> <div id="body"> ... </div> <div id="footer">...</div> </div> Currently, the element with the ...

htmlcssflexbox