Arhn - архитектура программирования

Проблемы с HTML-таблицей

У меня есть основная таблица, а затем я вставляю подтаблицы в каждую td. Как показано ниже. Проблема в том, что у меня есть:

<table id = "main>
<tr>
<th id = "header1">blah</td>
<th id = "header2">blah</td>
<th id = "header3">blah</td>
</tr>
<tr><td>
<table id = "sub1">
<tr><td headers='header1'>1</td></tr>
</table>
</td>
<td>
<table id = "sub2">
<tr><td headers='header2'>2</td></tr>
</table>
</td>
<td>
<table id = "sub3">
<tr><td headers='header3'>3</td></tr>
</table>
</td>
</tr>
</table>

теперь, если в sub1 есть только 4 строки, а в sub 2 и 3 по 100 строк, таблица продолжает помещать таблицу sub1 в середину остальной части таблицы. Как бы я остановил его от этого?

html html-table
21.10.2011

  • <th id = "header1">blah</td> должно быть <th id = "header1">blah</th>. <tr><td> должно быть <tr><td colspan="3">. 22.10.2011
  • Вложенные таблицы ужасно ужасны. Отсутствие читабельности говорит само за себя. Используйте Дивы. 22.10.2011
  • Это должно помочь: stackoverflow.com/questions/3673483/top -align-in-html-table 22.10.2011
  • @P.Brian.Mackey: Вложенные таблицы подходят для вложенных табличных данных. 22.10.2011
  • Если бы у меня была такая ситуация, я бы написал простой генератор HTML на javascript/c#. Таким образом, вам не нужно разбирать вложенные таблицы глазами. 22.10.2011
  • Возможный дубликат выравнивания по верхнему краю в таблице html? 07.02.2019

Ответы:


1

Попробуй это:

<td valign="top">

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

21.10.2011
  • Вместо этого используйте CSS: td { vertical-align: top; } 22.10.2011

    • 2

    Посмотрите на valign

    <td valign='top'>

    Обновленный источник

    <table id = "main>
<tr>
<th id = "header1">blah</td>
<th id = "header2">blah</td>
<th id = "header3">blah</td>
</tr>
<tr><td valign='top'>
<table id = "sub1">
<tr><td headers='header1'>1</td></tr>
</table>
</td>
<td>
<table id = "sub2">
<tr><td headers='header2'>2</td></tr>
</table>
</td>
<td>
<table id = "sub3">
<tr><td headers='header3'>3</td></tr>
</table>
</td>
</tr>
</table>
    21.10.2011

    3

    Если вы увеличиваете/уменьшаете значение no. строк/столбцов в ваших таблицах, вам может потребоваться настроить их с помощью свойств rowspan и colspan. Также для отображения текста в верхней части любой ячейки требуется свойство valign="top"

    21.10.2011

    4

    Сделайте вторую строку таблицы (после строки заголовка) открывающим тегом <tr style="vertical-align:top">. Это будет работать, и нет необходимости в rowspan или colspan.

    21.10.2011
    Новые материалы
    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..
    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..
    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..
    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..
    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..
    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..
    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..