Insert data into a table without any formatting

I'm trying to enhance my table by adding inputs within the td tags, but I want them to appear as plain text cells. Below is the code snippet I have been working with:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="table">
  <thead>
    <tr>
      <td>Some Text</td>
    </tr>
  </thead>
  <tbody id="Body">
    <tr>
      <td><input disabled style="with:100%;" value="data" /></td>
    </tr>
  </tbody>
</table>

Basically, I am looking for a way to display these input elements as simple text without any borders or background. I've attempted using outline: none in the styling, but it doesn't seem to be having any effect.

Answer №1

Here are 3 steps you can take to correct the style:

  1. Get rid of the border by using border: none
  2. Eliminate the background with background: none
  3. Add color: initial to remove the grey color from disabled input fields

Updated code snippet:

input {
  border: none;
  background: none;
  color: initial;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="table">
  <thead>
    <tr>
      <td>Some Text</td>
    </tr>
  </thead>
  <tbody id="Body">
    <tr>
      <td>
        <input disabled style="with:100%;" value="data" />
      </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

Creating a CSS grid layout with a scrollbar positioned on the left side and content filling from left to right

How can I move the scrollbar to the left while keeping ng-repeat population from left to right? I'm using an ng-repeat to fill a grid that is 3 by X (Width by height). By default, the scroll bar appears on the right side. I want to position it on the ...

Issues with displaying search form div using jQuery AJAX

Currently, I am in the process of developing a search form that includes a dropdown menu. The functionality involves selecting an item from the dropdown menu triggering an AJAX call to another PHP file. This call returns tags which resize both the dropdown ...

Transforming a traditional HTML/CSS/JS website into a cutting-edge React application using Tailwind CSS styling

I have a unique website template complete with HTML, CSS, and all necessary assets. Now, I am looking to develop a React JS application using this template. Firstly, I am wondering: Since I typically use Tailwind CSS for my other projects, would it be mo ...

Utilizing the Grid-A-Licious plugin multiple times within a single webpage

Currently, I am utilizing the Grid-A-Licious plugin for my project. It functions perfectly when used on a single page with one call to the plugin. However, due to my design requirements, I need to implement it within 3 tabs on the same page. Unfortunately, ...

New alternative for form-control-feedback in Bootstrap 4

The form-control-feedback class doesn't appear to be included in Bootstrap 4. What is the most effective way to achieve the desired outcome (an icon inside the textbox) using Bootstrap 4? <head> <link rel="stylesheet" href="https://max ...

Generate a list item that is contenteditable and includes a button for deletion placed beside it

I am attempting to create a ul, where each li is set as contenteditable and has a delete button positioned to the left of that li. My initial attempt looked like this: <ul id='list'> <li type='disc' id='li1' cl ...

Is it possible for a gradient to maintain the original width of the element to which it is added?

Is there a way to create a gradient that remains static and masks out certain visible parts? I want the countdown timer to darken as it nears the end. Currently, my gradient only reduces colors in between while keeping the left and right colors: (funct ...

Issues with form submission and JavaScript functionality have been detected in Internet Explorer, Firefox, and Safari, but are functioning properly in Chrome

Hey there! I've encountered a puzzling issue with a form I've created. It's programmed to determine the next page to redirect to using JavaScript after submission. Oddly enough, everything functions perfectly when I test it out in my IDE (C ...

Streaming HTTP content on a domain secured with HTTPS using HTML5

Is it possible to stream HTTP on an HTTPS domain without triggering browser security errors? By default, the browser tends to block such requests. I rely on the hls.js library for desktop support with .m3u8 files. When I play content directly (on mobile o ...

Altering the appearance of a component that is currently selected and in use

Currently, I have incorporated a component with its selector within another component as shown below: <div class="col-xl-4" style="margin-bottom: 30px;"> <app-patient-info-accordion *ngIf="patient" [cardTitle]=&qu ...

Is having async as false really detrimental?

Splitting my inquiry into two sections. Within my website, I am dynamically generating some divs by utilizing ajax post requests to retrieve data from the database. Following is the structure of my setup. <html> <body> <script type=" ...

iOS 8 home screen web apps with status bar overlay and footer bar integration

After installing a web application to 'home' and working with it, I noticed that a recent update to iOS has made the usual black status bar transparent and float above the web content below. In addition, there is an unseen horizontal bar at the ...

Fixed top bar and navigation menu, with a body that can be scrolled

My current goal is to achieve the following layout: <div style="position:absolute; background-color:Transparent; left:0px; right:0px; height:100px; z-index:2;"> <div style="background-color:Silver; width:1000px; height:100px; margin:0 auto;"& ...

"Header background image gradually fades out and disappears as you scroll, revealing a bottom gradient effect in a React application

When I scroll, my header image fades away. I used JavaScript in my React app to achieve this effect: useEffect(() => { const handleScroll = () => { if (parallaxDiv.current) { parallaxDiv.current.style.backgroundPositionY = `${ ...

Utilizing multiple dropdown buttons in navigation menu items with Bootstrap 4

Trying to find a solution for having sub menus within the menu items. There are 2 dropdown buttons (Reports and Views) within a menu item that is itself a dropdown item. Clicking on the first button displays the submenu below, but clicking on the second ...

What is the best way to gather Data URI content through dropzone.js?

I am currently utilizing Dropzone for its thumbnail generation feature and user interface. However, I am only interested in using the thumbnail generation ability and UI and would prefer to collect all the data URIs myself and send them to the server via a ...

Running a JavaScript function within a designated div element

I'm currently facing an issue with executing a javascript function - onload only in a specific div. I seem to be stuck on this problem, so if anyone could offer some assistance, I would greatly appreciate it. Thank you very much in advance! functio ...

Executing external Javascript within an HTML document

Just diving into this realm, so please have patience with me. I've got an external js file linked in my HTML. The JS code is solid and functions properly in Fiddle - https://jsfiddle.net/0hu4fs4y/ <script src="js/noti.js"></script> <sc ...

Problems Arising with Javascript Animation Functionality

I've created a script for an interactive "reel" that moves up or down when clicking on specific arrow buttons. However, I'm encountering two issues: 1) The up arrow causes it to move downward, while the down arrow moves it upward. 2) After exe ...

CSS :empty selector failing to target elements

I have a situation where I utilized the :empty selector within the .error class. However, I'm encountering an issue where even if there is no content inside the div with the error class, the error class does not get removed entirely. Upon examination ...