Как выровнять данные по верху строки таблицы html

Question

У меня есть эта HTML-таблица, где у меня есть одна ячейка в таблице с rowSpan = 3. поэтому в первом столбце у меня есть 3 строки с входами, а во втором столбце у меня есть изображение, показывающее охват всех 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>

Answer 1

Я думаю, что вы хотите, чтобы первые 2 строки были на минимальной высоте, а если картинка большая, все пространство должно идти на третьей строке. Если это так, тогда поместите высоту в первые 2 строки, примерно так:

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

Answer 2

использование

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

также ваш HTML выглядит неполным.

UPDATE

добавить style="height:100%;" в первые 2 строки, чтобы вся дополнительная высота была перенесена в 3-й ряд.

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

Answer 3

стиль td , как показано ниже, для управления выравниванием данных.

Answer 4

Вы можете установить фиксированную высоту для каждой строки, кроме последней.

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

Таким образом, все лишнее пространство перейдет в последний ряд.