2

I've been working on this JavaScript table and I'm stuck. I tried to find an answer here and on the web but unfortunately I couldn't.

What am I trying to do is align all the text fields and bring as close as I can the comments textbox.

<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>

Everything works great until I add the line:

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

right before the table closing.

The matter is that this line suppose to be with the same line as the last textbox. This line pushes the comments textbox to the right side of the screen exactly by the length of the text. And I can't figure out how to bring it back so it would be aligned near the text fields.

I want it to look like this:

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

instead of this:

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

3 回答 3

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 回答
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 回答
0

尝试使用colspan而不是空<td>标签：

<td colspan="2">long text here</td>

更多关于 colspan 的解释在这里。

于 2013-07-17T10:08:16.220 回答