2

私はこの JavaScript テーブルに取り組んできましたが、行き詰まっています。こことウェブで答えを見つけようとしましたが、残念ながらできませんでした。

私がやろうとしているのは、すべてのテキスト フィールドを揃えて、コメント テキスト ボックスにできるだけ近づけることです。

<html>
<body>
<table cellspacing= "20px">
<tr><td></td><td></td><td rowspan="6" valign="top">Comments
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<br><textarea rows="4" cols="40" name="Comments" tabindex="6"></textarea></td></tr>
<tr><td>Your&nbsp;Name*</td><td><input name="Name" id="Name" tabindex="1"></td><td></td></tr>
<tr><td>Company</td><td><input name="Company" id="Company" tabindex="2"></td></tr>
<tr><td>E-mail*</td><td><input name="Email" id="Email" tabindex="3"></td></tr>
<tr><td>Telephone*</td><td><input name="Phone" id="Phone" tabindex="4"></td></tr>
<tr><td>Your Partner name</td>
<td><input name="Partner" id="Partner" tabindex="5"></td>
<td>This is a text and it suppose to be long. Actually exactly this length.</td></tr>
</table>

</body>
</html>

次の行を追加するまで、すべてがうまく機能します。

<td>This is a text and it suppose to be long. Actually exactly this length.</td>

テーブルが閉まる直前。

問題は、この行が最後のテキストボックスと同じ行であると想定されていることです。この行は、コメント テキスト ボックスをテキストの長さだけ画面の右側に押し込みます。そして、それを元に戻す方法がわからないので、テキストフィールドの近くに配置されます。

私はそれを次のようにしたい：

text|---| comments
text|---| |-------|
text|---| |-------|
text|---| 
text|---| long text here

これの代わりに：

text|---|                comments
text|---|                |-------|
text|---|                |-------|
text|---|               
text|---| long text here
4

3 に答える 3

1

いくつかのこと：

- nbsp を使用したフォーマットは避けてください。
- CSS を使用する

そのようです：

<html>
<head>
<style>

body
{
margin:0;
padding:0;
}
.left
{
float:left;
width:300px;
}
</style>
</head>
<body>
  <div class="left">
    <table cellspacing="20px" border-colour="blue">
        <tr>
            <td>Your&nbsp;Name*</td>
            <td><input name="Name" id="Name" tabindex="1"></td>
            <td valign="top" rowspan="4">
                Comments<br><textarea rows="4" cols="40" name="Comments" tabindex="6"></textarea>
            </td></tr>
        <tr><td>Company</td><td colspan="2"><input name="Company" id="Company" tabindex="2"></td></tr>
        <tr><td>E-mail*</td><td colspan="2"><input name="Email" id="Email" tabindex="3"></td></tr>
        <tr><td>Telephone*</td><td colspan="2"><input name="Phone" id="Phone" tabindex="4"></td></tr>
        <tr>
            <td>Your Partner name</td>
            <td><input name="Partner" id="Partner" tabindex="5"></td>
            <td>This is a text and it suppose to be long. Actually exactly this length.</td>
        </tr>
    </table>
  </div>
</body>
</html>
于 2013-07-17T10:44:01.520 に答える
1

このjsFiddleはあなたが望むことをしますか?

2 つの重要なポイント:

1. テキスト領域の上<td rowspan="3" valign="top">のtdの場合

2.最後の行は次のようになります

<tr>
  <td>Your Partner name</td>
  <td><input name="Partner" id="Partner" tabindex="5"></td>
  <td colspan="2">This is a text and it suppose to be long. Actually exactly this length.</td>
</tr>
于 2013-07-17T10:10:01.147 に答える