Помогите создать таблицу

Тема в разделе "Как сделать...", создана пользователем Zefvs, 11 окт 2010.

Статус темы:
Закрыта.
  1. Zefvs

    Zefvs

    Регистр.:
    11 авг 2009
    Сообщения:
    230
    Симпатии:
    20
    Подскажите как сделать таблицу как на рисунке[​IMG]

    Необходимо, чтобы при заполнении ячеек А2, ширина ячеек А1 не изменялась, а имела фиксированную ширину.
    Параметр "width" контейнера <td> не позвоялет этого сделать
    Какой самый просто способ решить данную задачу?
    Заранее спасибо!
     

    Вложения:

    • table.gif
      table.gif
      Размер файла:
      2,6 КБ
      Просмотров:
      48
  2. diavolic

    diavolic

    Регистр.:
    17 мар 2010
    Сообщения:
    522
    Симпатии:
    102
    ну если width не помогает, воткни в ячейку картинку прозрачную с нужной шириной.

    вот еще вариант - воткни ячейки А2 в отдельную таблицу с прозрачным бордюром. и у этой таблицы жестко выставь нужную ширину
     
  3. Zefvs

    Zefvs

    Регистр.:
    11 авг 2009
    Сообщения:
    230
    Симпатии:
    20
    в ячейках А2 как правило выводятся данные в виде текста, который "расдвигает" ячейку А2 и ячейку А1 (которая над А2), а этого не должно быть!
    Вариант с прозрачной картинкой отпадает, не известно какая ширину будет у А2

    Тоесть нужно чтобы ячейки А1 и А2 "расдвигались" не зависимо друг от друга
     
  4. Delk0

    Delk0

    Регистр.:
    26 мар 2010
    Сообщения:
    284
    Симпатии:
    47
    Проще всего сделать 2 вложенные таблицы для A1 и А2
     
  5. Kub

    Kub

    Регистр.:
    5 июн 2009
    Сообщения:
    607
    Симпатии:
    474
    Вот так попробуйте. Как и говорили лучше вставить вторую таблицу, что бы бордеры не удваивались вставил div только с правым бордером
    Код:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test</title>
    <style type="text/css">
    * {
    	margin: 0px;
    	padding: 0px;
    }
    .tab1 {
    	width: 600px;
    	text-align: center;
    	border-collapse: collapse;
    }
    .tab1 td {
    	border: 2px solid #000;
    	width: 200px;
    }
    .tab2, .tab2 td {
    	border: 0;
    	border-collapse: collapse;
    }
    .tab2 div {
    	border-right: 2px solid #000;
    }
    </style>
    </head>
    
    <body>
    <table cellpadding="0" cellspacing="0" class="tab1">
      <tr>
        <td rowspan="2">A</td>
        <td>A1</td>
        <td>A1</td>
      </tr>
      <tr>
        <td colspan="2"><table cellpadding="0" cellspacing="0" class="tab2">
            <tr>
              <td><div>555555555555555555555555555555</div></td>
              <td>A2</td>
            </tr>
        </table></td>
      </tr>
    </table>
    </body>
    </html>
    
     
    Zefvs нравится это.
  6. Zefvs

    Zefvs

    Регистр.:
    11 авг 2009
    Сообщения:
    230
    Симпатии:
    20
    к сожалению это не решение моей задачи, мне необходимо чтобы ширина ячеек А2 изменялась и при этом не влияла на ширину ячеек А1, и наоборот...
     
  7. Kub

    Kub

    Регистр.:
    5 июн 2009
    Сообщения:
    607
    Симпатии:
    474
    Для A1 можно по такому же принципу сделать, ещё одну таблицу добавить и для ячеек A1 и div вложить. Попробуйте этот вариант
    Код:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test</title>
    <style type="text/css">
    * {
    	margin: 0px;
    	padding: 0px;
    }
    .tab1 {
    	width: 600px;
    	text-align: center;
    	border-collapse: collapse;
    }
    .tab1 td {
    	border: 2px solid #000;
    	width: 200px;
    }
    .embed, .embed td {
    	border: 0;
    	border-collapse: collapse;
    }
    .embed div {
    	border-right: 2px solid #000;
    }
    </style>
    </head>
    
    <body>
    <table cellpadding="0" cellspacing="0" class="tab1">
      <tr>
        <td rowspan="2">A</td>
        <td><table cellpadding="0" cellspacing="0" class="embed">
            <tr>
              <td><div>A1</div></td>
              <td>55555555555555555555555555555555</td>
            </tr>
          </table></td>
      </tr>
      <tr>
        <td><table cellpadding="0" cellspacing="0" class="embed">
            <tr>
              <td><div>555555555555555555555555555555</div></td>
              <td>A2</td>
            </tr>
          </table></td>
      </tr>
    </table>
    </body>
    </html>
    
     
    Zefvs нравится это.
Статус темы:
Закрыта.