Setting the width to 100% in the CSS file is not functioning properly in Chrome browser

Below is the CSS code I am using:

td.tdhover input:hover,td.tdhover select:hover,td.tdhover textarea:hover{
 background: #f2f5a9;
 color:#ff0000;
}
td.tdhover select, td.tdhover input, td.tdhover textarea{
 position:relative;
 width:100%;
}
td.tdhover input.nobor,td.tdhover textarea.nobor{
 border:none;
}

Now, here is the HTML code being utilized:

<table border="1" style="width:100%;">
  <tr>
    <td style="width:100px;">Poll Name </td>
    <td style="width:5px;"><input type="text" class="nobor"></td>
    <td class="tdhover"><input type="text"></td>
  </tr>
</table>

The issue I am facing is that this setup appears to not be functioning in Chrome but works flawlessly in IE.

htmlcss

Answer №1

Check out this resource on box-sizing

See the DEMO here

td.tdhover select,
td.tdhover input,
td.tdhover textarea{
  -webkit-box-sizing: border-box ;
     -moz-box-sizing: border-box ;
          box-sizing: border-box ;
   /*position: relative ; (OT) why this? */
   width: 100% ;
}

Answer №2

When using width:100%, it is proportionate to the size of its parent container.

To ensure consistency, you may need to specify a width for the container. Here's an example to compare the two scenarios:

<table id="table1" border="1" style="width:100%;">
   ...
</table>

<div style="width:200px;">
   <table id="table2" border="1" style="width:100%;">
      ...
   </table>
</div>

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

Arranging the form in an organized and visually pleasing manner

Does anyone have any ideas on how to design this form in a clean and organized way? I've experimented with lists, tables, and divs but can't determine which works best. Contact Information: <div class="formsubmit"><label>Name:& ...

htmlcssforms

There is currently no graph being shown

I've run this code but I'm not getting any output. There are no errors showing up, but I can't seem to figure out what's wrong. Can someone help me identify the issue? Thanks! <!DOCTYPE html> <html> <head> <m ...

htmlangularjsplotgraph

PHP not compatible with Fancybox iframe

I'm facing a simple problem that I can't seem to figure out. I have a button that, when clicked, opens a fancybox with an iframe displaying a page from my website. This page includes a form for sending an email. Everything works fine except that ...

javascriptphpjqueryhtmlfancybox

Problematic Mouse Position Detection in FireFox

I'm encountering a problem with fetching mouse positions on the Firefox browser. It seems like there's an issue in my code causing it not to work correctly. Here is what I have done so far. Javascript Code: function GetMousePosition(event){ ...

javascriptjqueryhtmlfirefox

JS instant Toggle (just one click) - initial value of toggled item

Can you explain why we have to click twice on this link (http://jsfiddle.net/xL8hyoye/4/): html: <a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</a> <div id="foo">This is foo< ...

javascripthtmlcss

Storing a temporary value within an ng-repeat iteration in AngularJS

A unique and interesting query arises when dealing with random value generation. Here is a snippet of code that showcases how to achieve this: function randomize() { return function (input) { if (input !== null && input !== undefined & ...

javascripthtmlangularjs

Is there a bug with Edge 40/15 opacity and visibility transition causing flickering during event propagation?

Previous versions of Edge displayed the correct transition effect. I am animating a div by adjusting opacity and visibility using CSS when its parent's hover event is triggered. //LESS &:hover .inside{ //part that matters: visibility: visible ...

htmlcsslesscss-transitionsmicrosoft-edge

Generate clickable links on a web page with PHP and a form

Every week I find myself tediously creating links by manually copying and pasting. It's starting to feel like a crazy process, and I'm sure there must be a faster way. A123456 B34567 d928333 s121233 I need these numbers to be transformed into h ...

phpjavascripthtml

Exploring the Power of Promise Chaining: Understanding the Distinction between .animate and setTimeout

I am seeking clarification on how promises work in JavaScript. I am struggling to understand the difference between executing a chain composed of jQuery.animate and setTimeout. For example, if I write the code below: var promise = new Promise(function(re ...

javascriptjqueryhtmlpromise

Activate CSS transition only when not in active state

I have a situation where I want to change the background color immediately upon hovering over an element, and then revert back to the original color when no longer hovering. The CSS for this is straightforward: #el { background-color: black; } #el:hov ...

csscss-transitions

Switching from a horizontal orientation to a vertical layout for navigation

My current horizontal navigation bar needs to be transformed into a vertical left layout. Here is the HTML code: <div ng-controller="PortalController"> <header> <h1>E_Zuite</h1> <nav role='navigation&apo ...

htmlcss

Interact with elements across multiple SVG files using HTML

I have a website that consists of three SVGs. I am now looking to connect elements in these different SVGs by drawing simple lines between them. My goal is to create a line from element1 (#element1) in svg1 to element6 in svg2. Unfortunately, I am unable ...

javascriptjqueryhtmlcsssvg

What is the best way to conceal a title while still displaying the content with the use of *ngIf in Angular

Is there a way to hide the title "Title.PhoneInfo" without hiding the content? When I set the "IsTitleDisabled" property to true, both the title and content are hidden. I only want to hide the title. Is there a solution to achieve this? <form-layout-c ...

htmlangular

CSS animations can make the navigation bar vanish into thin air

I recently started implementing CSS3 animations from the Animate.css library and I must say, they really enhance the look and feel of my website. The animations pair perfectly with WOW.js to create stunning effects. However, I have encountered a minor iss ...

jquerycssanimationcss-animations

What could be causing the slider element to select the incorrect value in Firefox and Internet Explorer?

Attempting to test a slider control on a webpage using Selenium, here is the HTML: <div class="slider theme1 ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" data-action="Slider" data-step="True" da ...

htmlseleniumslider

Exploring GitHub's sleek popup: in search of CSS styling!

Exciting news from Github: they have introduced a new feature called maps. This feature is developed using Leaflet, and it has some unique custom CSS for the pop-up design: I'm eager to implement something similar on my site, but I'm having trou ...

cssgithubpopupleafletmapbox

What is the method to print hidden text enclosed by the : :before and the : :after spans while using Python along with Selenium?

Currently, I am working on Python programming language using Selenium. I need to extract and display the closed year value that falls between the span tags. <div class="display_year"> <span class="year"> ::before &qu ...

pythonhtmlseleniumxpathtext

Settings for the packaging of web components

Is there a way to configure a web component in vue.config.js and separate the iconfont.css section when building? I am using the vue-cli-service build --target wc-async --name chat-ui src/views/Chat/Launcher.vue --report command to package the web compon ...

cssvue.jsweb-componentfont-facevue-cli

Is there a way to eliminate the menuArrow from a Select widget in gwt-bootstrap3?

In my current project, using gwt-bootstrap3, I have been attempting to conditionally remove the menu arrow from a Select box. I have experimented with various methods such as: <select:Select ui:field="fieldName" name="fieldName" b:id="fieldName" showM ...

cssgwtgwtbootstrap3

Adding a dynamic index from ngFor to an HTML attribute value can be accomplished by incorporating the current

I am using ngFor and I am trying to make an attribute inside the loop change its value by adding the ngFor index. This means that each div created within ngFor will have a unique attribute value. Source: <div class="class1" *ngFor="let item of items; l ...

htmlangular