How to set an input field to use 100% of available width in a TD, minus X number of pixels?

I've got a data table which uses 100% of the available browser width. Within some of the TDs there are text input fields. To the right of these are two links, which are used as pickers and styled as block-level elements at 16x16px. The code would look a bit like this:

<table (dynamic width)>
开发者_Python百科  <tr>
    <td (dynamic width)>
      <input type="text" (dynamic width) />
      <a href="#" style="display: block; width 16px; height 16px;"></a>
      <a href="#" style="display: block; width 16px; height 16px;"></a>
    </td>
  </tr>
</table>

I'd like the input field to be use 100% of the available TD width, minus the 32px (16px+16px) of the date pickers. I've tried some techniques referenced in articles on this site but can't seem to find a working solution.

Unfortunately this has to work in IE7+ under an XHTML Strict Doctype.

Any help would be greatly appreciated.

i know it isnt tagged,

but you might be able to use javascript/jquery to manipulate the DOM elements on your page (which it seems that is what you want to do)

so to manipulate in jquery:

$('td input').width($(this).parent().width() - 32)

You cant do this with pure CSS, but can be done with JS,

A note on the XHTML Strict Doctype - its crap, use Transitional, The XHTML Strict DTD forces you to do stupid stuff like use JS to use target="_blank" and other unnecessary not-niceness, I am all in favour of self closing tags as well as quoted parameters but the stuff in XHTML Strict makes me rage.

Okay, moving on.

The Javascript you want is:

var input = document.getElementById('blah'),
wrap = document.getElementById('wrap').offsetWidth;
input.style.width = (wrap - 36) + "px";

http://jsfiddle.net/Mutant_Tractor/My2Qn/

Purely using CSS: How about using float:left for the input type and float:right for the date pickers? Don't forget to use clear:both after the floated elements. Haven't tried it but you can give it a shot.

OK - this adds a little extra markup but I think that it does what you want.

Html

<table>
  <tr>
    <td>
    <div class="holder">
      <input type="text" id="widthInput" />
      <span class="anchors">
      <a href="#" style="display: inline-block; width 16px; height 16px;">a</a>
      <a href="#" style="display: inline-block; width 16px; height 16px;">b</a>
      </span>
    </div>
    </td>
  </tr>
</table>

CSS

#widthInput{display:inline-block;width:100%;}
div.holder{position:relative;padding-right:32px;}
span.anchors{position:absolute;top:0;right:0;}

The display for the anchors has been changed to inline-block so that the anchors can have a width set and still appear next to each other.

span.anchors is a container for the anchors. This has position:absolute so that it is removed from the flow of the document and can be positioned where we need it to be.

div.holder provides a point of reference for span.anchors as it has position:relative. If the td had position:relative then the anchors would be positioned relative to the screen as is not a block element. The padding-right pushes the input away from the right edge so that the anchors display correctly.

Finally, the input is given width:100% so that it takes up all of the available space (width of the div less padding). The id is added purely so that the input can be selected through CSS.

I have tested this in FireFox, Chrome and IE and it seems to work.

Why all the js for a simple little CSS tweak?

<table width="100%">
    <tr>
        <td>
            <a href="#" style="float: right; width 16px; height 16px;">D2</a>
            <a href="#" style="float: right; width 16px; height 16px;">D1</a>
            <input type="text" style="display:block; margin: 0 32px 0 0;"/>
        </td>
    </tr>
</table>

If you can't change the order of the inputs and links in your HTML, use this instead:

<table width="100%">
    <tr>
        <td style="position:relative;">
            <input type="text" style="display:block; margin: 0 32px 0 0;"/>
            <a href="#" style="position: absolute; top: 0; right:0; width 16px; height 16px;">D2</a>
            <a href="#" style="position: absolute; top:0; right: 16px; width 16px; height 16px;">D1</a>
        </td>
    </tr>
</table>