Having issues with the width not functioning correctly in my table cells

Here is a sample I'd like to share with you:

link

CODE HTML:

<table class="table prospects-table">
            <thead>
            <tr>

                <th width="200">Name</th>
                <th width="200">Email</th>
                <th width="200">Phone</th>
                <th width="200">Message</th>
                <th width="200">Actions</th>
            </tr>
            </thead>
                   <tbody>
                     <tr>
                       <td width="200">test sdada</td>
                       <td width="200"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b2d3c1d6c1d3d6d3f2cbd3dadddd9cd1dddf">[email protected]</a></td>
                       <td width="200">(321) 312-3123</td>
                       <td width="200"> sadasda</td>
                       <td width="200">



                         <div class="in-line">
                            <i class="fa fa-pencil-square-o"></i>
                            <a href="http://192.168.0.105/user/editenewleed/22"><span>Edit</span></a>
                        </div>

                        <div class="in-line">
                            <i class="fa fa-users "></i>
                         <a href="http://192.168.0.105/user/addpatientfromnewlead/22"><span>Transfer</span></a>
                        </div>


                        <div class="in-line">
                            <i class="fa fa-trash-o"></i>
                            <a href="http://192.168.0.105/user/deletenewleed/22"><span>Delete</span></a>
                        </div>




                    </td></tr>
                                   <tr>
                       <td width="200">Diaconescu Cristian</td>
                       <td width="200"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="036270677062677062436176707766606c2d716b">[email protected]</a></td>
                       <td width="200">(312) 312-3123</td>
                       <td width="200">asdasadsdasasasasasdkhsdjkashsdkjahdhjsgdhjgvhhs,ajfkghjkdjhdsgjhasdghjgsadhjgshjkhvjgjkgfkjhdkjjhgfhjkdhkjsgdfv</td>
                       <td width="200">



                         <div class="in-line">
                            <i class="fa fa-pencil-square-o"></i>
                            <a href="http://192.168.0.105/user/editenewleed/24"><span>Edit</span></a>
                        </div>

                        <div class="in-line">
                            <i class="fa fa-users "></i>
                         <a href="http://192.168.0.105/user/addpatientfromnewlead/24"><span>Transfer</span></a>
                        </div>


                        <div class="in-line">
                            <i class="fa fa-trash-o"></i>
                            <a href="http://192.168.0.105/user/deletenewleed/24"><span>Delete</span></a>
                        </div>  
                    </td></tr>                
         </tbody>
</table>

I'm currently facing an issue where the columns in my table are not displaying at a width of 200px as intended.

I attempted to specify the width using the following code within each td tag, but it doesn't seem to be working...

<td width="200">test sdada</td>

Can someone please assist me in identifying the problem and offering a solution?

Your help is greatly appreciated!

htmlcss

Answer №1

Have you considered simply including a style tag in your code?

You can add the following to the head section:

<style>
td,th {width:200px}
</style>

Answer №2

Ensure you include table-layout: fixed; in your table styling

table{
  table-layout: fixed;
}

Check out the updated version on codepen

Answer №3

utilize this

<td style="width: 200px;">example sdada</td>

master correct css by examining element-specific css here

Answer №5

Give this a shot 

<td width="70%">JXXXXXX</td>

Hopefully this will be beneficial for you

Answer №6

The width attribute is outdated and no longer recommended. It is now advised to utilize the CSS width property for styling purposes.

Important Note: Avoid using the deprecated width attribute and instead define and style rules using CSS. Opt for the CSS property width over the deprecated attribute - MDN

td, th {
  width: 200px;
}

Answer №7

Setting the width of td in HTML5 is not reliable, it's better to use CSS styles instead. Here's an example of the simplest way to do it:

<style type="text/css">
  .td-width {
    width: 200px;
  }
</style>
 <td class="td-width">John Doe</td>

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 ensure that v-model does not become "true" or "false" in an input checkbox using Vue

I am currently working on a filter popup that includes a list of checkboxes. By default, some items should be selected and others not selected. I have connected these checkboxes to an object array using v-model. My issue is that when I deselect and select ...

javascripthtmlcssvue.jsfrontend

AJAX Showdown: Comparing jQuery's AJAX API to JavaScript's XHR

tl;dr: I have two different scripts that appear to be identical, but one works while the other does not. Why is this? Let me provide some context for this post. I am working on creating an image uploading form that utilizes AJAX requests to generate a dyn ...

javascriptjqueryajaxhtml

What is the reasoning behind the return type of void for Window.open()?

There is a difference in functionality between javascript and GWT in this scenario: var newWindow = window.open(...) In GWT (specifically version 1.5, not sure about later versions), the equivalent code does not work: Window window = Window.open("", "", ...

javascripthtmlgwt

"Enhance Your Website with jQuery Mobile's Multi-Page Setup and Panel

I am currently facing the challenge of managing multiple pages within a single document and I would like to utilize jQM 1.3's Panel widget to control navigation between these pages. However, the issue arises from the requirement that Panels must be co ...

javascriptjqueryhtmljquery-mobilenavigation

Creating a Dropdown Filter using Vanilla JavaScript

I am currently working on a project for one of my college courses, which involves creating a dropdown list filter using pure JavaScript to filter a grid of images in HTML/CSS. The main challenge I am facing is that this filter needs to be able to work with ...

javascripthtmlcss

Creating a dynamic hover drop-down navigation bar in ASP.NET

After successfully creating a navigation bar with hover effects, I am now looking to implement a dropdown list when hovering over the items. Can anyone provide guidance on how to achieve this? Below is the current code snippet I am working with: <ul c ...

htmlcssasp.net

JSOUP is cleverly filtering out specific tags while navigating through the HTML tree

While attempting to navigate the HTML tree of a Wikipedia page, I noticed that certain blocks of HTML elements in the code are being omitted. Is there a way to prevent these omissions? CODE Document doc = Jsoup.connect(url).timeout(10000).userAgent(USER_ ...

javahtmlweb-scrapingjsoup

What is the best way to customize a video in Bootstrap 5 so that it remains at the bottom of the screen with centrally aligned text

When using Bootstrap 5, I am facing a challenge with a video on the index page that plays beneath the navigation. I want to maintain the 16x9 aspect ratio and have centered text overlayed on the video. However, I encounter an issue when attempting to set a ...

cssvideooverlaybootstrap-5

CSS positioning problems thoroughly elucidated

I'm facing two issues that I can't seem to resolve. My goal is to recreate a design similar to the one found at . My first issue is with adjusting the box in the header to stay aligned next to my headline tags. The second issue is related to pos ...

htmlcssdivision

Disabling Scroll for a HTML Input Tag

My input field has a long value and is set to readonly. Although I have applied overflow-x: hidden; to it, scrolling is still possible on mobile devices. I want to disable this scroll behavior. Can anyone provide a solution? Thank you for your assistance. ...

javascripthtmlcssreactjsnext.js

What is the best way to make my text stand out against a faded background?

After mastering the basics of web development on Codecademy, I was eager to start my own blog and create a unique website. One challenge I encountered was figuring out how to fade the background without affecting the text. Despite researching various solut ...

javascriptjqueryhtmlcss

Tips for customizing the cursor to avoid it reverting to the conventional scroll cursor when using the middle click

When you wish to navigate by scrolling with the middle mouse button instead of using the scroll wheel, simply middle-click and your cursor will change allowing for easy scrolling on web pages. Even though I am utilizing style="cursor: pointer" and @click. ...

javascriptcssvue.jscursorvuetify.js

The resizing function on the droppable element is malfunctioning on Mozilla browsers

I've been working on making one div both droppable and resizable. Surprisingly, everything is functioning perfectly in Chrome but not in Firefox. If you'd like to see the issue for yourself, here is my jsFiddle demo that you can open in Firefox: ...

javascriptjqueryhtmlcss

How can I use XPATH to target a div after choosing a nested element?

I had the task of creating a universal identifier to locate a dropdown menu following a label. There are 10 different forms, each with a unique structure but consistent format, which means I cannot rely on specific IDs or names. Instead, my approach was to ...

javascripthtmlcssselenium-webdrivercss-selectors

Content will not be visible within the HTML template

While attempting to incorporate an HTML template I discovered online, everything seemed to be functioning correctly except for the fact that the text was not appearing. Following a tutorial required me to use a static file to load the site. Another issue I ...

htmldjango

Instructions for activating a button in the absence of any inputs

I need help enabling a button in angularjs based on whether any of the inputs are filled out. I was successful in disabling a button when only one input is checked, but how can I do this for all inputs affecting one button? This is what I've attempted ...

javascripthtmlangularjs

What is the best way to grab the initial section of a website's text while using a WKWebView?

When working with a WKWebView, retrieving the webpage's title is simple using webView.title. However, obtaining the first paragraph of the webpage's content poses a challenge with no straightforward solution. Any tips or suggestions on how to ac ...

htmliosuiwebviewwkwebview

What is the best way to store an HTML header text file in a PHP variable?

Here is a snippet of my HTML file: <form action="cnvrt.php" method="POST" > Enter your text here - <input type="text" id="in" name="in"> <br> <input type="submit" value="submit" > </form> This is how my PHP file look ...

phphtmlajaxjson

The navbar seamlessly adapts to the screen size, maintaining its responsiveness even when utilizing the .container class within Asp.Net MVC

I'm relatively new to ASP.NET MVC. Currently, I'm facing an issue with the navbar in my partial view for the shared layout. Despite adding the .container class from Bootstrap, the navbar doesn't conform to the screen size as expected. My a ...

asp.net-mvchtmlnavbarpartial-viewsbootstrap-4

What could be preventing the onclick event from functioning properly in JavaScript?

After creating a basic JavaScript code to practice Event handling, I encountered an issue where the function hello() does not execute when clicking on the "Click" button. What could be causing this problem? html file: <!DOCTYPE html> <html> ...

javascripthtmlonclickeventhandler