элементы таблицы html не совпадают со строкой выше

0

У меня проблемы с дизайном стола.

http://jsfiddle.net/Gs7Vx/5/

<tr>
    <td class="label">HRS</td>
    <td class="label">INSP</td>
</tr>

Я хочу, чтобы поля "HRS" и "INSP" в этой строке совпадали с полями ввода над ними. Я много пробовал, никто из них не работал. Я уверен, что есть простое решение, и я просто пропустил его.

Теги:
alignment

6 ответов

1
Лучший ответ

Чтобы входные данные совпадали с метками, вам необходимо

A) добавьте пробел <td></td> во вторую строку (потому что строка над ней имеет 3 ячейки, и она имеет только 2) и

B) удалить float:right; из класса .label.

См. Это в качестве примера. Я только добавил <td></td> к строке в первом из ваших четырех разделов, но все они идентичны, поэтому вы получаете точку.

Поделиться
1

Проверьте эту скрипку.

строка над этой строкой, содержащая только два <td> с контентом 'hrs' и 'insp', содержит 3 <td> s. Следовательно, вам нужно поместить пустой td в эту строку (например, с "hrs" и "insp").

Кроме того, вам нужно удалить стиль float:right и добавить position:relative стиля position:relative в определении стиля .smallinput -class.

  • O/P

Изображение 174551

Это решает вашу проблему.

Поделиться
1

Вы хотите настроить таблицу следующим образом:

            <table border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td>HRS</td>
                <td>
                  <input type="text" class="smallinput">
                </td>
              </tr>
              <tr>
                <td>INSP</td>
                <td>
                  <input type="text" class="smallinput">
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <textarea name="textarea" rows="12" class="txt"></textarea>
                </td>
              </tr>
            </table>

В следующий раз форматируйте свой код перед публикацией. Вы не сделали свое намерение ясным. Итак, у нас есть несколько людей, которые дают вам разные ответы, потому что мы форматируем ваш код и пытаемся выяснить, что вы действительно хотите сделать. Убедитесь, что у вас одинаковое количество <td> в каждой строке, или используйте colspan, чтобы восполнить недостающие.

Поделиться
  • 1
    Вы должны дать людям, которые помогли вам с вашим вопросом, некоторую обратную связь, чтобы сообщить им, помогают ли они или нет. Также проверьте, какой ответ помог вам выяснить вашу проблему.
  • 0
    спасибо - не знал о кольспане.
0

Я вынул это из <td class="label"></td> и поставил его прямо перед собой, и он работал нормально.

INSP<input type="text" class="smallinput"></td><td width="40px" style="font-size:12px">HRS<input type="text" class="smallinput">

(используя хром.)

Поделиться
0

ваш код не так. Прежде всего, у вас есть незамкнутые элементы, все входные элементы должны заканчиваться на />

Затем, чтобы иметь все в строке, сделайте это так:

<tr>
<td>label</td>
<td>input</td>
<td>label</td>
<td>input</td>
</tr>

тогда стиль по мере необходимости

Поделиться
0

это сработало для меня

<tr>
    <td class="fieldtitle"><i style="color:#fff;" class="icon"></i>
    </td>
    <td width="40px" style="font-size:12px">
        <input type="text" class="smallinput"><span style="font-size:10px">HRS</span>
    </td>
    <td width="40px" style="font-size:12px">
        <input type="text" class="smallinput"><span style="font-size:10px">INSP</span>
    </td>
</tr>
<tr>
    <td></td>
    <td></td>
</tr>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню