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

Статус
В этой теме нельзя размещать новые ответы.
Zefvs

Zefvs

Местный житель
Регистрация
11 Авг 2009
Сообщения
230
Реакции
20
Подскажите как сделать таблицу как на рисунке
attachment.php


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

Вложения

  • table.gif
    table.gif
    2,6 KB · Просмотры: 48
ну если width не помогает, воткни в ячейку картинку прозрачную с нужной шириной.

вот еще вариант - воткни ячейки А2 в отдельную таблицу с прозрачным бордюром. и у этой таблицы жестко выставь нужную ширину
 
diavolic написал(а):
ну если width не помогает, воткни в ячейку картинку прозрачную с нужной шириной.
вот еще вариант - воткни ячейки А2 в отдельную таблицу с прозрачным бордюром. и у этой таблицы жестко выставь нужную ширину
Нажмите для раскрытия...

в ячейках А2 как правило выводятся данные в виде текста, который "расдвигает" ячейку А2 и ячейку А1 (которая над А2), а этого не должно быть!
Вариант с прозрачной картинкой отпадает, не известно какая ширину будет у А2

Тоесть нужно чтобы ячейки А1 и А2 "расдвигались" не зависимо друг от друга
 
Проще всего сделать 2 вложенные таблицы для A1 и А2
 
Вот так попробуйте. Как и говорили лучше вставить вторую таблицу, что бы бордеры не удваивались вставил 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>
 
Kub написал(а):
Вот так попробуйте. Как и говорили лучше вставить вторую таблицу, что бы бордеры не удваивались вставил 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>
Нажмите для раскрытия...

к сожалению это не решение моей задачи, мне необходимо чтобы ширина ячеек А2 изменялась и при этом не влияла на ширину ячеек А1, и наоборот...
 
Для 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>
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху