テーブルの中にinputタグを入れたのですが、空白をなくしたい

Question

肌色の部分をinputタグにした途端に、
空欄ができてしました。inputタグではない場合は空白ができませんでした。どこを直せばいいのでしょうか？

<div>
	<table>
		<tr>
			<td class="border" style="border: 1px solid #000000" ><span class="mgr">1</span>
			<td class="border" style="border: 1px solid #000000" ><span class="mgr">2</span>
			<td class="border" style="border: 1px solid #000000" ><span class="mgr">3</span>
		</tr>
		<?php for ($i=0; $i<9; $i++) {?>
		<tr>
			<td><input type="text" class="border_add"  style="border: 1px solid #000000" ></td><span class="mgr"></span>
			<td><input type="text" class="border_add"  style="border: 1px solid #000000" ></td><span class="mgr"></span>
			<td><input type="text" class="border_add"  style="border: 1px solid #000000" ></td><span class="mgr"></span>
		</tr>
		<?php }?>
	</table>
</div>

.border{
	background-color: rgb(235, 241, 222);
}
.border_add{
	background-color: rgb(253, 233, 217);
}

Answer 1

td要素の外側に余計な要素をおいているからではないかと。
かつ、ちょっとスタイルシートをいじってpaddingをキャンセルしたり。

<style>
.border {
    border: 1px solid #000000;
    background-color: rgb(235, 241, 222);
}
.border2 {
    padding: 0;
}
.border_add {
    background-color: rgb(253, 233, 217);
    padding: 0;
    border: 1px solid #000000;
}
table {
    border-spacing: 0;
}
</style>
<div>
    <table>
        <tr>
            <td class="border"><span class="mgr">1</span></td>
            <td class="border"><span class="mgr">2</span></td>
            <td class="border"><span class="mgr">3</span></td>
        </tr>
<?php
    for ($i=0; $i<9; $i++) {
?>
        <tr>
            <td class="border2"><input type="text" class="border_add"><span class="mgr"></span></td>
            <td class="border2"><input type="text" class="border_add"><span class="mgr"></span></td>
            <td class="border2"><input type="text" class="border_add"><span class="mgr"></span></td>
        </tr>
<?php
    }
?>
    </table>
</div>

Comments

[退会済みユーザー]

tdやinputがくっつきまくっているので太く見えているけど、もうちょっと手間を掛ければキャンセルできるはず。ただ、質問の意図がどこまで要求しているのかわからないので、回答としてはこれで一旦妥協してみた次第。

Answer 2

そもそも、tr内に span は入れられない。

<tr>: 表の行要素 - HTML: HyperText Markup Language | MDN

許可されている内容	0 個以上の <td> 要素または <th> 要素。 スクリプト対応要素 (<script> および <template>) も許可されています。

inputがない行(1行目)は、td の閉じタグがないので、次の<td>の前に閉じタグ </td> がブラウザ(Chrome)によって補完されている。

まずは文法違反を修正してからの話でしょう。
文法違反の補完方法は規定されていないのでブラウザによって異なることもあるので。

Answer 3

tdに直書きしたstyleをけして

.border{
    background-color: rgb(235, 241, 222);
}
.border_add{
  border:0px;
  background-color: rgb(253, 233, 217);
}
table{
border-collapse:collapse;
}
td{
border:solid 1px;
}

Answer 4

追記の追記　手元で検証したらspanが空でも空白が出来なかったので、
検証ツールでtdとspanに当たっているCSSをご確認ください、が正解かなぁ。

画像追加の追加
はみ出してるspanにabcを入れてみたら、tableの中に含めてもらえなかったので…
###　やっぱりinputにmarginかpaddingが当たってる説！
※ふぁいなるあんさぁっ！

<tr>
    <td><input type="text" class="border_add"  style="border: 1px solid #000000" ></td><span class="mgr">a</span>
    <td><input type="text" class="border_add"  style="border: 1px solid #000000" ></td><span class="mgr">b</span>
    <td><input type="text" class="border_add"  style="border: 1px solid #000000" ></td><span class="mgr">c</span>
</tr>

※上の画像のコード、spanに入れてもテーブルから外に押しやられている。

画像追加　検証ブラウザはchrome、デフォルトでは揃ってました。
見えない部分に原因があると思われまする。

以下検証ツールの結果次第やでー

追記　ちゃう、spanが外側にある！
またやらかしましたでっ

おそらくinputタグにデフォルトのstyleが当たっていると思われるので、

input {
 margin: 0;
 padding: 0;
}

これで直るかなぁ。

以下追記しまくった後の蛇足です。
おいらはいったい何と戦ってるんだろうか…