如何将数据对齐到 html 表格行的顶部 [英] How to have data align to top of html table row

问题描述

我有这个 html 表格，表格中有一个单元格，rowSpan = 3.所以在第一列，我有 3 行输入，在第二列我有一张图片显示跨越所有 3 列.我试图弄清楚浏览器如何确定如何为第一列中的每一行垂直分配间距.

I have this html table where I have one cell in the table with rowSpan = 3. so in the first column, I have 3 rows with inputs and in the second column I have a picture showing to span all 3 columns. I am trying to figure out how the browser figured out how to vertically allocate spacing for each of the rows in the first column.

然后我想变得紧"，所以所有的空白空间(如果图片很大，到底部).

I want then to be "tight" so all the empty space (if the picture is big, goes to the bottom).

但似乎每行平均分配了空白空间.

But it seems like the empty space is being allocated across each row equally.

无论如何要改变这种行为..

Is there anyway to change this behavior . .

这是表:

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

推荐答案

我认为您希望前 2 行处于最小高度，如果图片很大，则所有空间都放在第三行.如果是这种情况，则为前 2 行设置一个高度，如下所示:

I think you want to have the first 2 rows at minimum height and if the picture is big, all the space to go on the third line. If this is the case, then put a height to the first 2 lines, something like this:

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

这篇关于如何将数据对齐到 html 表格行的顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！