HTML - размещение строк во вложенной таблице

Ниже приведен код для создания вложенной таблицы для двух строк по 3 столбца.HTML - размещение строк во вложенной таблице

<html> 
<body> 
<h4>Two rows and three columns:</h4> 
<table border="1" width="100%" height="400" align="top"> 
<tr> 
    <td> 
    <table width="100%" border="2" height ="100" align="top"> 
    <tr> 
     <td>1-1</td> 
     <td>1-2</td> 
    </tr> 
    <tr> 
     <td>1-3</td> 
     <td>1-4</td> 
    </tr> 

    </table> 

</td> 
    <td> 
    <table width="100%" border="2" height ="100" align="top"> 
    <tr> 
     <td>2-1</td> 
     <td>2-2</td> 
    </tr> 
    <tr> 
     <td>2-3</td> 
     <td>2-4</td> 
    </tr> 

    </table> 

<td> 
    <table width="100%" border="2" height ="100" align="top"> 
    <tr> 
     <td>3-1</td> 
     <td>3-2</td> 
    </tr> 
    <tr> 
     <td>3-3</td> 
     <td>3-4</td> 
    </tr> 
    </table> 
</td> 
</tr> 
<tr> 
</td> 
    <td> 
    <table width="100%" border="2" height ="100" align="top"> 
    <tr> 
     <td>4-1</td> 
     <td>4-2</td> 
    </tr> 
    <tr> 
     <td>4-3</td> 
     <td>4-4</td> 
    </tr> 
</table> 
<td> 
    <table width="100%" border="2" height ="100" align="top"> 
    <tr> 
     <td>5-1</td> 
     <td>5-2</td> 
    </tr> 
    <tr> 
     <td>5-3</td> 
     <td>5-4</td> 
    </tr> 
    </table> 
<td> 
    <table width="100%" border="2" height ="100" align="top"> 
    <tr> 
     <td>6-1</td> 
     <td>6-2</td> 
    </tr> 
    <tr> 
     <td>6-3</td> 
     <td>6-4</td> 
    </tr> 
    </table> 
</body> 
</html>

ТОК OUTPUT WHICH IM GETTING NOW

ОЖИДАЕМЫЕ EXPECTED OUTPUT

Проблема заключается в базовую таблицу будет создаваться и внутренние таблицы, имеющие много пространства в середине. Мое требование состоит в том, что если есть две строки и не должно быть пробелов между первыми двумя строками, если осталось какое-либо пространство, которое может быть после первых двух строк. Пожалуйста, обратитесь к прилагаемому изображению. (второе изображение является масштабированным, пожалуйста, игнорируйте масштабирование)

Я хотел сделать это, не меняя высоты базовых таблиц. т. е. я хочу, чтобы высота базовой таблицы составляла только 400. Опираясь на другую проблему, предложенный DoctorMick, это работает только на IE6. Не для Firefox и Mozilla.

источник

2012-03-07 m4n07

Во-первых, установить высоту верхнего ряда (во внешней таблице) к низкому числу (который будет в основном просто быть использована как это минимальная высота), т.е.

<tr style="height: 1">

, а затем установить CSS свойство вертикального выравнивания на втором ряду (во внешней таблице), т.е.

<tr style="vertical-align: top">

Вы можете удалить ALIGN = «сверху» из таблицы подменю.

Полный пример ...

<html> 
    <body> 
    <h4>Two rows and three columns:</h4> 
     <table border="1" width="100%" height="400" align="top"> 
     <tr style="height: 1"> 
      <td> 
      <table width="100%" border="2" height ="100" align="top"> 
       <tr> 
       <td>1-1</td> 
       <td>1-2</td> 
       </tr> 
       <tr> 
       <td>1-3</td> 
       <td>1-4</td> 
       </tr> 
      </table> 
      </td> 
      <td> 
      <table width="100%" border="2" height ="100" align="top"> 
       <tr> 
       <td>2-1</td> 
       <td>2-2</td> 
       </tr> 
       <tr> 
       <td>2-3</td> 
       <td>2-4</td> 
       </tr> 
      </table> 
      <td> 
      <table width="100%" border="2" height ="100" align="top"> 
       <tr> 
       <td>3-1</td> 
       <td>3-2</td> 
       </tr> 
       <tr> 
       <td>3-3</td> 
       <td>3-4</td> 
       </tr> 
      </table> 
     </td> 
     </tr> 
     <tr style="vertical-align: top"> 
     <td> 
      <table width="100%" border="2" height ="100"> 
       <tr> 
       <td>4-1</td> 
       <td>4-2</td> 
       </tr> 
       <tr> 
       <td>4-3</td> 
       <td>4-4</td> 
       </tr> 
      </table> 
     <td> 
      <table width="100%" border="2" height ="100"> 
       <tr> 
       <td>5-1</td> 
       <td>5-2</td> 
       </tr> 
       <tr> 
       <td>5-3</td> 
       <td>5-4</td> 
       </tr> 
      </table> 
      <td> 
      <table width="100%" border="2" height ="100"> 
       <tr> 
       <td>6-1</td> 
       <td>6-2</td> 
       </tr> 
       <tr> 
       <td>6-3</td> 
       <td>6-4</td> 
       </tr> 
      </table> 
      </td> 
     </tr> 
    </table> 
    </body> 
</html>

источник

2012-03-07 13:42:50 DoctorMick

Спасибо, я попробовал ваше предложение, и оно работает. – m4n07

Возможно ли динамическое регулирование в зависимости от количества строк и столбцов? – m4n07

Облицовка другой проблемы, она работает только на IE6 Не на Firefox или Mozilla. – m4n07

Попробуйте установить VALIGN = TOP стиль на внутренний стол. Если это не помогает, установите вертикальное выравнивание для строки.

источник

2012-03-07 13:38:34

VALIGN = TOP не работает. – m4n07

Используйте атрибут cellpadding, чтобы сделать таблицу так, как вы ожидаете. , например, использовать как этот

<table border="1" cellpadding="10"> 
    <tr><td></td> 
    </tr> 
</table>

источник

2012-03-07 13:41:07 Gowti

Используйте этот CSS:

table{border-layout:fixed;border-spacing=0} 
td{vertical-align:top;}

источник

2012-03-07 13:44:12 amd

Нет его не работает. Благодаря! – m4n07

HTML - размещение строк во вложенной таблице

ответ

Смежные вопросы