Question

我一直在研究这个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

Answer 1

这 jsFiddle 能做你想做的吗？

2个要点：

文字区域上方的 td

1。 <td rowspan="3" valign="top">

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>

Answer 2

一些事情：

- Avoid formatting using nbsp's.
- Use 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>

Answer 3

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

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

More explanation about colspan here.

如何在JavaScript / Html中对齐表格单元格

3 个答案: