table td要素の中にinput要素等をピッタリと納める方法

Question

tableの中のtd要素の中に、input要素と単位である「円」を収めたいと考えています。
スペースがあまりないので、tdの中に一列でinputと「円」を収めたいです。
なお、tableは、

table-layout:fixed;

として、ページの一定の範囲内にぴったりと納まるように調整しています。

<td><input type="text">円</td>

input要素だけを納めるのであれば、CSSに

padding-left:0px ;
padding-right:0px ;

と記述すればよいと思います。

良い方法が思いつかないので、とりあえず、当該inputについて、

width:60%;

と設定することで、無理矢理inputのサイズ調整をしています。

inputと単位一文字分がピッタリ納まるようなCSSの指定の仕方をご存知の方、ご教示頂けないでしょうか。
よろしくお願い致します。

Answer 1

コード
<table><tr><td><input /></td><td>円</td></tr></table>

最初のtdにwidth:100%、input に も同様に、って指定すれば、自動補正されます。
css じゃないけど、これが一番簡単ですね。

Answer 2

function ElementStyleOperation(_Element){
	ElementStyleOperation.prototype.Element=_Element;
	ElementStyleOperation.prototype.Get=function (_elm,_Style){   
		var _Element= !_elm||_elm=="" ? this.Element : _elm;
		if(!_Element&&!_elm){
			console.error("Element is null : Elementが存在しません。");
			return "";
		}
		var GetStyle;
		if(document.defaultView){
			GetStyle=document.defaultView.getComputedStyle(_Element, '');
		}else{
			GetStyle=_Element[currentStyle].getAttribute(_Style);
		}
		return GetStyle[_Style];
	}
	ElementStyleOperation.prototype.Set=function (_elm,_Style,_Value){
		var _Element= !_elm||_elm=="" ? this.Element : _elm;
		if(!_Element&&!_elm){
			console.error("Element is null : Elementが存在しません。");
			return "";
		}
		_Element.style[_Style]=_Value;
	}
}

var _element=new ElementStyleOperation();
console.log(_element.Get(document.getElementById("header"),"width"));

/*
要素のスタイル属性に対して値を設定
_element.Set(document.getElementById("header"),"width","500px");
*/

上記コードはとある自作ライブラリの補助コードなのですが%指定されたスタイルなどもpxで取得できます(私が確認する限りでは)。ある要素のスタイルを別要素のスタイルにセットする目的に使用しています(今回の要望に近いかと)。
font-sizeから1emのpx数を取得。上記コードを使用してtdの幅を取得して1em分引いて設定すれば希望通りになりますかね？

Comments

[退会済みユーザー]

お礼が遅くなり、申し訳ありません。
この方法を用いて、tdの幅を取得して1em分引いて設定してみます。

Answer 3

現状の質問内容から回答を導きだせる人は少ないと思いますよ。

tableの中のtd要素の中に、input要素と単位である「円」を収めたいと考えています。

この部分についてですが収めることは可能でしょう(こちらでも確認しましたが)
どう収めたいのかが明確でないため回答しにくくなっていると思います。(一定の範囲内という表現もそうですがその値などを明確にしなければ回答する側も質問する側も結果的に苦労します)

もしinput要素の幅を文字の一文字の大きさに合わせたいというような要望(違うと思いますが)であればinput要素のwidth指定を1emで行えばいいでしょう。

もしくは一律で決まったtd要素の幅に合わせて全てのinput要素と単位(文字)を最大幅で合わせたいということでしょうか？
単位部分が必ず一文字ならば%指定かpx指定で合わせてやればいいのではないでしょうか。単位が複数文字になるなど一定でない場合はJavaScriptを使用した方がいいのではないかと思います。(一文字と二文字までしかあり得ないという場合ならclassを使用して分けるというような方法でもいいと思いますが)

Comments

[退会済みユーザー]

ご回答頂き、ありがとうございます。
不明確な質問で、申し訳ありませんm(__)m

全てのinput要素と単位(文字)を、tdの最大幅で合わせたいということです。
ただし、画面によってtdの幅が変わるため、pxでの指定はできません。
よって、単位の文字が「円」であれば単位の幅は1emなので、inputの幅を「100%-1em」のように指定できれば、inputと単位で、tdの幅にピッタリ納まると思いました。
そのような指定の方法がないかと探しております。