Rinat

Как склеить ячейки в таблице из div?

Recommended Posts

<!--Таблица на диве-->

<div class="table">
        <div class="row">
            <div class="cell cell-1">1</div>
            <div class="cell cell-2">2</div>
        </div>
        <div class="row row-2">
            <div class="cell cell-3" rowspan="2">3</div>
            <div class="cell cell-4">4</div>
        </div>
    </div>

/*——css реализация—————*/

.table{display: table; border: 1px solid silver; padding: 10px;}
.row{display: table-row; border: 1px solid silver; padding: 10px;}
.cell{display: table-cell; border: 1px solid silver; padding: 10px;}

подскажите как склеить ячейку 3 и 4? Спасибо всем за помощь!

Share this post


Link to post
Share on other sites

Это одно из ограничений display: table. Склеить строки или столбцы при его использовании нельзя.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Amaere
      Ищу ментора по веб-разработке. Готов работать бесплатно или платить за обучение. Главное, что бы я мог потом зарабатывать.
       
    • By pitchcontrol
      Доброго дня всем.
      Есть пример https://codepen.io/pitchcontrol/pen/bGbJdgZ Две таблицы вложены в блок, у блока задан размер шрифта x-large, у одной таблицы задан large а у другой smaller.
      Получается у них должны быть одинаковые размеры, но по факту они разные. Почему это так?
    • By sarcus
      Основной блок содержит 2 блока
      1-й с некоторым текстом
      2-й flex блок с input элементами
      2-й блок как будто не видит <b>ширины</b> основного блока, которую <b>задает 1-й блок</b> (sometext)  
      и расширяет основной. 
      Подскажите как решить данную проблему ? 
      Пример :  https://jsfiddle.net/sarcus/1vmaf3wo/14/
       
      Но если вместо input (class='inp') вставить div то все приходит в норму:
      https://jsfiddle.net/1vmaf3wo/83/
      <style> .cont {              position: absolute;             top : 200px; left: 30px;             border: 1px solid #ccc;         }         .ctrl {               display: flex;              width: 100%;             flex-direction: row;             border: 1px solid#ccc;          }         .btn {              flex: 0 0 auto;                      }         .inp {             flex: 1 1 auto;             width: 100%;         } </style> <div class="cont">             <div class="sometext">555 5555 5555 5555 5556</div>             <div class="ctrl">                     <input type="button" class="btn"  value="<<" />                     <input class="inp" type="text" />                     <input type="button" class="btn" value=">>" />             </div>                      </div>  
  • Member Statistics

    46,502
    Total Members
    3,128
    Most Online
    JamesAPatel
    Newest Member
    JamesAPatel
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.