0

I've searched and there's a few posts online from a few years ago saying this isn't possible. It might be now though. I just need this to work on modern browsers. FF, Chrome, IE11. This currently works on Firefox and Chrome, but not on IE11.

http://jsfiddle.net/predbjax/18/

Basically the height of the input box should be equal to the height of the table cell. (The magenta should cover all the yellow). In chrome this can be done by adding height: 100% to the input css. This doesn't work though in Firefox. One solution is to set a fixed height for the table row, but that's not ideal.

<table>
    <tr>
        <td>Large text</td>
        <td><input type="text" value="test"></td>
    </tr>
</table>

and the css:

* { margin: 0; padding: 0; }
table
{
    border-spacing: 0;
}
table td:first-child
{
    font-size: 50px;
    background-color: #f00;
}
table td:last-child
{
    position:relative;
    background-color: #ff0;
}
input
{
    background-color: #f0f;
    border: none;
    position:absolute;
    height: 100%;
    top: 0;
}
Sirisian
  • 417
  • 6
  • 21
  • possible duplicate of [input height differences in Firefox and Chrome](http://stackoverflow.com/questions/7229568/input-height-differences-in-firefox-and-chrome) – jbutler483 Nov 27 '14 at 15:13
  • Try this option http://jsfiddle.net/predbjax/12/ – DaniP Nov 27 '14 at 15:16
  • Close. Doesn't work in IE11 though. http://jsfiddle.net/predbjax/15/ I added width:100% to the second td so it would expand. The input box doesn't seem to be displaying. – Sirisian Nov 27 '14 at 15:37

1 Answers1

-2

Here is updated fiddle. Please check.

Fiddle

* { margin: 0; padding: 0; }
table
{
    border-spacing: 0;
}
table td:first-child
{
    font-size: 50px;
    background-color: #f00;
}
table td:not(:first-child)
{
    background-color: #ff0;    
}
input
{
    background-color: #f0f;
    border: none;
    height: 100%;
    font-size: 50px;
}
<table>
    <tr>
        <td>Large text</td>
        <td><input type="text" value="test"></td>
    </tr>
</table>
jbutler483
  • 24,074
  • 9
  • 92
  • 145
A dev
  • 930
  • 3
  • 12
  • 27
  • Questions/answers with only a fiddle link is discouraged (even removed). Write your code in here as well, so that even though fiddle goes down/away the answer is complete. – Mattis Nov 27 '14 at 15:16
  • Changing the font-size of the input box is not an acceptable solution. The text should remain the default size, but be aligned in the middle. – Sirisian Nov 27 '14 at 16:03
  • just remove `font-size: 50px` from input{...} – A dev Nov 27 '14 at 16:48