Блог

Главная - Вопросы по программированию - Попытка создать пропорциональную таблицу с помощью divs

Попытка создать пропорциональную таблицу с помощью divs

#html #css #html-table

#HTML #css #html-таблица

Вопрос:

Я пытаюсь создать HTML-страницу с пропорциональной таблицей, используя только элементы div. Я хочу, чтобы левый столбец занимал 60% ширины таблицы и имел 3 строки. Для 2-го столбца я хочу, чтобы он занимал оставшиеся 40% ширины таблицы и имел 4 строки, каждая строка с 2 ячейками.

Вот моя HTML-разметка: почему я вижу только первый (левый) столбец?

 body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background-color: #DDDDDD;
}

#MasterDiv {
  display: table;
  height: 100%;
  width: 100%;
}

.left {
  display: table-column;
  width: 60%;
}

.right {
  display: table-column;
  width: 40%;
}

.A {
  height: 30%;
  display: table-row;
}

.B {
  height: 35%;
  display: table-row;
}

.B2 {
  height: 25%;
  display: table-row;
}

.C1 {
  display: table-cell;
  background: #ff00ff;
}

.C2 {
  display: table-cell;
  background: #ffffff;
}

.C3 {
  display: table-cell;
  background: #0000ff;
}

.C4 {
  display: table-cell;
  background: #ff0000;
}

.C5 {
  display: table-cell;
  background: #00ff00;
}

.C6 {
  display: table-cell;
  background: #000000;
}  
 <div id="MasterDiv">
  <div class="left"></div>
  <div class="right"></div>
  <div class="A">
    <div class="C1"></div>
  </div>
  <div class="B">
    <div class="C2"></div>
  </div>
  <div class="B">
    <div class="C3">
    </div>
  </div>
  <div class="B2">
    <div class="C1"></div>
    <div class="C2"></div>
  </div>
  <div class="B2">
    <div class="C3"></div>
    <div class="C4"></div>
  </div>
  <div class="B2">
    <div class="C5"></div>
    <div class="C6"></div>
  </div>
  <div class="B2">
    <div class="C4"></div>
    <div class="C6"></div>
  </div>
</div>

Ответ №1:

вам нужно вложить свои строки и столбцы в левый и правый разделы. На данный момент вы объявляете left и right, но внутри них нет содержимого, и есть сочетание элементов table и div, которые могут запутать ситуацию.

Я создал div-единственный пример того, что вы описали выше. Разделы «строки» слева занимают 100%, а «разделенные столбцы» занимают 50% «правой» ширины. Высота зависит от содержимого, но если вы хотите указать, вы можете сделать это, добавив идентификатор или класс.

 .container {
  width: 100%;
  font-family: Helvetica, Sans-Serif;
}

.left,
.right,
.split-column {
  float: left;
  background-color: #f9f9f9;
}

.left {
  width: 60%;
}

.right {
  width: 40%;
}

.split-column {
  width: 50%;
  background-color: lightblue;
}  
 <div class="container">
  <div class="left">
    <div class="row">
      row 1
    </div>
    <div class="row">
      row 2
    </div>
    <div class="row">
      row 3
    </div>
  </div>
  <div class="right">
    <div class="split-column">
      cell 1
    </div>
    <div class="split-column">
      cell 2
    </div>
    <div class="split-column">
      cell 1
    </div>
    <div class="split-column">
      cell 2
    </div>
    <div class="split-column">
      cell 1
    </div>
    <div class="split-column">
      cell 2
    </div>
    <div class="split-column">
      cell 1
    </div>
    <div class="split-column">
      cell 2
    </div>
  </div>

Ответ №2:

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

http://www.cssdesk.com/5wSVE

Я добавил немного css от TJ Hannington answerser