テーブルの特定の要素の真下にtextboxを配置

画像のように、テーブルの金額要素の真下に合計金額を配置したいです。
常に真下に来るようにするには、サイズや位置指定を細かく設定するしかないのでしょうか？
テーブルのサイズを%指定とかにした場合、実現するのは厳しいでしょうか。

※追記
なぜか画像を貼れませんでした、、、
イメージとしては、下記のようなものを作成しようと思っております。
コードのイメージが沸かず、調べても分からなかったため質問しました。（コードの添付ではなくてごめんなさい）

 ___ ___ ___ ___
|___|___|___|___|
|___|___|___|___|
|___|___|___|___|
|___|___|___|___|
|___|___|___|___|
|___|___|___|___|

         ___
        |___|←常に３つ目のtdの真下にこのtextboxが来るように配置

kei344

2017/09/08 03:20

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

行動規範の内容に同意します

回答3件

ベストアンサー

こういうイメージですか？

HTML
1<html>
2    <head>
3        <meta charset="utf-8">
4<style>
5            table{border-collapse: collapse;}
6            th,tbody td{border : solid black;}
7            tfoot { border:none}
8        </style>
9    </head>
10    <body>
11        <table>
12            <thead>
13                <tr>
14                    <th>col1</th>
15                    <th>col2</th>
16                    <th>col3</th>
17                    <th>col4</th>
18                </tr>                
19            </thead>
20            <tbody style="border:solid">
21                <tr>
22                    <td>1</td>
23                    <td>2</td>
24                    <td>3</td>
25                    <td>4</td>
26                </tr>
27                <tr>
28                    <td>5</td>
29                    <td>6</td>
30                    <td>7</td>
31                    <td>8</td>
32                </tr>
33            </tbody>
34            <tfoot>
35                <tr>
36                    <td colspan="2"></td>
37                    <td><input type="text"></td>
38                    <td></td>
39                </tr>
40            </tfoot>
41        </table>
42    </body>
43</html>