BG Development


Страници: (2) 1 [2]   ( Първото ново мнение ) Reply to this topicStart new topicStart Poll

> html таблица, сложна таблица за начинаещи
thrawn
Публикувано на: 28-02-2018, 16:31
Quote Post



Име:
Група: Потребител
Ранг: Почетен член

Мнения: 1950
Регистриран на: 17.01.17



С css не можеш да контролираш височините. Ще го направиш, но статично, с фиксирана височина на всяка клетка. В момента в който се опиташ да поставиш данни в клетката, и размерът им излезе от границите и ще стане весело. Единствения вариант за реализация с css е да ползваш display: table-* но пък тогава ще се появят проблеми с групирането (col/rowspan).

Като цяло, ако това е заданието за layout в който ще се поставят динамични данни, то таблицата е единственото смислено решение. При това, решение което ще е универсално.
PMEmail Poster
Top
kapitancho
Публикувано на: 28-02-2018, 18:04
Quote Post



Име:
Група: Потребител
Ранг: Почетен член

Мнения: 1122
Регистриран на: 26.02.05



Това си е точно с dislplay:grid. Елементарно и с много малко html и малко css.


--------------------
®...¢↓"←—¬ªº±£™×÷⁄...©
PMEmail Poster
Top
kapitancho
Публикувано на: 28-02-2018, 18:21
Quote Post



Име:
Група: Потребител
Ранг: Почетен член

Мнения: 1122
Регистриран на: 26.02.05



Вариант 1 - по-неудобен за дефиниране:
CODE

<style>
      body {
            margin: 0;
            padding: 0;
            width: 100vw;
            height: 100vh;
            display: grid;
            grid-template-rows: repeat(8, 1fr);
            grid-template-columns: repeat(5, 1fr);
      }
      div { border: solid 1px black; }
      .box1 { grid-area: 1 / 1 / span 2 / span 5; }
      .box2 { grid-area: 3 / 1 / span 2 / span 3; }
      .box3 { grid-area: 3 / 4 / span 3 / span 2; }
      .box4 { grid-area: 5 / 1 / span 4 / span 1; }
      .box5 { grid-area: 5 / 2 / span 2 / span 2; }
      .box6 { grid-area: 6 / 4 / span 3 / span 2; }
      .box7 { grid-area: 6 / 5 / span 3 / span 2; }
      .box8 { grid-area: 7 / 2 / span 2 / span 1; }
      .box9 { grid-area: 7 / 3 / span 2 / span 1; }
</style>
<body>
      <div class="box1">box1</div>
      <div class="box2">box2</div>
      <div class="box3">box3</div>
      <div class="box4">box4</div>
      <div class="box5">box5</div>
      <div class="box6">box6</div>
      <div class="box7">box7</div>
      <div class="box8">box8</div>
      <div class="box9">box9</div>
</body>


--------------------
®...¢↓"←—¬ªº±£™×÷⁄...©
PMEmail Poster
Top
kapitancho
Публикувано на: 28-02-2018, 18:24
Quote Post



Име:
Група: Потребител
Ранг: Почетен член

Мнения: 1122
Регистриран на: 26.02.05



И вариант 2, който лично аз предпочитам:
CODE

<style>
      body {
            margin: 0;
            padding: 0;
            width: 100vw;
            height: 100vh;
            display: grid;
            grid-template-rows: repeat(8, 1fr);
            grid-template-columns: repeat(5, 1fr);
            grid-template-areas:
                  'box1 box1 box1 box1 box1'
                  'box1 box1 box1 box1 box1'
                  'box2 box2 box2 box3 box3'
                  'box2 box2 box2 box3 box3'
                  'box4 box5 box5 box3 box3'
                  'box4 box5 box5 box6 box7'
                  'box4 box8 box9 box6 box7'
                  'box4 box8 box9 box6 box7'
      ;
      }
      div { border: solid 1px black; }
      .box1 { grid-area: box1; }
      .box2 { grid-area: box2; }
      .box3 { grid-area: box3; }
      .box4 { grid-area: box4; }
      .box5 { grid-area: box5; }
      .box6 { grid-area: box6; }
      .box7 { grid-area: box7; }
      .box8 { grid-area: box8; }
      .box9 { grid-area: box9; }
</style>
<body>
      <div class="box1">box1</div>
      <div class="box2">box2</div>
      <div class="box3">box3</div>
      <div class="box4">box4</div>
      <div class="box5">box5</div>
      <div class="box6">box6</div>
      <div class="box7">box7</div>
      <div class="box8">box8</div>
      <div class="box9">box9</div>
</body>


--------------------
®...¢↓"←—¬ªº±£™×÷⁄...©
PMEmail Poster
Top
thrawn
Публикувано на: 28-02-2018, 18:45
Quote Post



Име:
Група: Потребител
Ранг: Почетен член

Мнения: 1950
Регистриран на: 17.01.17



Имаш бира от мен icon_smile.gif
Как е с ИЕ?
PMEmail Poster
Top
kapitancho
Публикувано на: 28-02-2018, 18:48
Quote Post



Име:
Група: Потребител
Ранг: Почетен член

Мнения: 1122
Регистриран на: 26.02.05



В 11 можв да се докара горе-долу, но само по първия начин.


--------------------
®...¢↓"←—¬ªº±£™×÷⁄...©
PMEmail Poster
Top
0 потребители преглеждат тази тема в момента (0 гости, 0 анонимни потребители)
Потребители, преглеждащи темата в момента:

Topic Options Страници: (2) 1 [2]  Reply to this topicStart new topicStart Poll

 


Copyright © 2003-2018 | BG Development | All Rights Reserved
RSS 2.0