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

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

0 голосов
/ 07 марта 2012

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

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

CURRENT OUTPUT WHICH IM GETTING NOW

ОЖИДАЕТСЯ EXPECTED OUTPUT

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

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

Ответы [ 4 ]

3 голосов
/ 07 марта 2012

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

<tr style="height: 1">

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

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

Вы можете удалить align = "top" из вложенной таблицы.

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

<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>
0 голосов
/ 07 марта 2012

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

table{border-layout:fixed;border-spacing=0}
td{vertical-align:top;}
0 голосов
/ 07 марта 2012

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

<table border="1" cellpadding="10">
   <tr><td></td>
   </tr>
 </table>
0 голосов
/ 07 марта 2012

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

...