代码之家 › 专栏 › 技术社区 › leora Matt Lacey

如何使数据与html表格行的顶部对齐

html-table html

leora Matt Lacey · 技术社区 · 14 年前

我有一个html表,表中有一个单元格 rowSpan = 3

然后我想“紧”所有的空白(如果图片很大,就放在底部)。

但似乎每一行的空间都是平均分配的。

有没有办法改变这种行为。

这是桌子:

<table class="input" border="1">
<tbody>
    <tr>
        <td valign="top">G:</td>
        <td valign="top">
            <select id="GId" maxlength="50" name="GId">
                <option></option>
                <option value="2">Joe</option>
                <option selected="selected" value="3">Bill</option>
            </select>
        </td>
        <td id="imageBorder" rowspan="3" align="center">
            <img class="my_img" src="http://www.example.com/image.png">
        </td>
    </tr>
    <tr>
        <td valign="top">Type:</td>
        <td valign="top">
            <select id="EId" maxlength="50" name="EId">
                <option></option>
                <option value="10"></option>
                <option selected="selected" value="2">A</option>
                <option value="4">C</option>
            </select>
        </td>
    </tr>
    <tr>
        <td valign="top">Manager:</td>
        <td valign="top">
            <select id="ManagerPersonId" maxlength="50" name="ManagerPersonId">
                <option></option>
                <option value="204">A</option>
                <option value="183">B</option>
            </select>
        </td>
    </tr>
    <tr>
        <td valign="top">PictureL:</td>
        <td colspan="2" valign="top">
            <input id="PictureLink" maxlength="200" name="PictureLink" size="60" value="http://www.example.com/image.png" type="text">
        </td>
    </tr>
</tbody>
</table>

4 回复 | 直到 7 年前

CristiC jason.zissman 14 年前

我想你应该把前两排放在最低高度,如果图片很大,所有的空间都放在第三行。如果是这种情况,那么在前两行加上一个高度,如下所示:

  <table class="input" border="1">
     <tbody>
      <tr>
       <td valign="top" height="1">G:</td>
       <td valign="top">
            <select id="GId" maxlength="50" name="GId">
                <option value="2">Joe</option>
                <option selected="selected" value="3">Bill</option>
            </select>
       </td>
       <td id="imageBorder" rowspan="3" align="center"><img class="my_img" src="http://www.mysite.com/image.png"> </td>
      </tr>
      <tr>
       <td valign="top" height="1">Type:</td>
       <td valign="top">
            <select id="EId" maxlength="50" name="EId">
                <option value="10"></option>
                <option selected="selected" value="2">A</option>
                <option value="4">C</option>
            </select>
       </td>
     </tr>
     <tr>
        <td valign="top">Manager:</td>
        <td valign="top">
            <select id="ManagerPersonId" maxlength="50" name="ManagerPersonId">
                <option value="204">A</option>
                <option value="183">B</option>
            </select>
        </td>
     </tr>
     <tr>
      <td valign="top">PictureL:</td>
      <td colspan="2" valign="top"><input id="PictureLink" maxlength="200" name="PictureLink" size="60" value="http://www.mysite.com/image.png" type="text">
     </td>
    </tr>
   </tbody>
 </table>

bluwater2001 12 年前

设计如下所示,以控制数据对齐。

<table>
<tr>
<td style = "height:300;width:375;vertical-align:top;"> abc </td>
</tr>
</table>

Barnee Emily 11 年前

<tr valign="top">...</tr>

而且你的html看起来不完整。

添加 style="height:100%;" 在前两排,所以整个额外的高度被转移到第三排。

<table class="input" border="1">
<tbody>
    <tr style="height: 100%;">
        <td valign="top">G:</td>
        <td valign="top"><select id="GId" maxlength="50" name="GId">
                <option></option>
                <option value="2">Joe</option>
                <option selected="selected" value="3">Bill</option>
            </select></td>
        <td id="imageBorder" rowspan="3" align="center"><img class="my_img" src="http://www.google.co.in/logos/2010/flintstones10-hp.jpg"></td>
    </tr>
    <tr style="height: 100%;">
        <td valign="top">Type:</td>
        <td valign="top"><select id="EId" maxlength="50" name="EId">
                <option></option>
                <option value="10"></option>
                <option selected="selected" value="2">A</option>
                <option value="4">C</option>
            </select></td>
    </tr>
    <tr>
        <td valign="top">Manager:</td>
        <td valign="top"><select name="ManagerPersonId" maxlength="50" id="ManagerPersonId">
                <option></option>
                <option value="204">A</option>
                <option value="183">B</option>
            </select></td>
    </tr>
    <tr>
        <td valign="top">PictureL:</td>
        <td colspan="2" valign="top"><input value="http://www.mysite.com/image.png" size="60" name="PictureLink" maxlength="200" id="PictureLink" type="text"></td>
    </tr>
</tbody>
</table>

Esteban 14 年前

您可以为每行设置固定高度,但最后一行除外。

<tr style="height: 20px">
  <td></td>
  <td></td>
  <td></td>
</tr>
<tr style="height: 20px">
  <td></td>
  <td></td>
  <td></td>
</tr>
<tr>
  <td></td>
  <td></td>
  <td></td>
</tr>

这样所有多余的空间都会排到最后一行。