настольная клетка - какой-то кольспан?

Question

Я сейчас немного озадачен, потому что у меня был CSS-код, который работал, но он совсем не был красивым. Теперь я хочу переработать эти стили CSS и создать их с помощью LESS. И у меня большие проблемы с display:table; / display:table-row; и display:table-cell;.

Например, у меня есть следующий код: http://jsfiddle.net/La3kd/2/

Как я могу сделать так, чтобы последняя ячейка (центр) не сдвигала вышеупомянутую вторую ячейку вправо? Последняя ячейка должна иметь ширину 2 ячейки выше. Нужен какой-то кольспан. Это так странно, потому что у меня сложилось впечатление, что это сработало до того, как я переработал код. Но теперь все элементы вправо полностью сдвинуты.

Answer 1

CSS не имеет аналога colspan.Исходя из вашего примера, вы можете просто пометить последнюю строку как отдельный нестандартный блок.

Вы также можете использовать display: table-caption в сочетании с caption-side: bottom, чтобы отобразить строку таблицы как последнюю «строку», котораяохватывает все столбцы.Смотрите живое демо .

Answer 2

В зависимости от ваших потребностей, макет flexbox может выполнить то, что вы ищете.

div.table{
  display:block;
  width:100%;
}

div.table >div{
  display:flex;
  width:100%;
  border:1px solid gray;
  flex-direction:horizonal;
}
div.table > div >div{
  display: block;
  flex-grow:1;
  border-bottom:1px solid #ddd;
  vertical-align: middle;
  height:30px;
  padding:4px;
}

См. Демонстрацию:

http://jsbin.com/mimegodiba/edit?html,css,output

Answer 3

Используйте реальную таблицу, когда вы вынуждены сделать это, чтобы получить нужный макет.

ЕДИНСТВЕННАЯ необходимая причина не использовать таблицу для макета состоит в том, что говорящий браузер для слепого дает номер строкии координаты номера столбца каждой ячейки таблицы.Это сбивает с толку слепого читателя, когда ячейки таблицы используются для разметки.

Конечно, гораздо проще использовать поля, границы и отступы, когда они выполняют работу намного лучше, чем подделывать их с помощью таблиц, но когда выесть что-то с макетом, похожим на страницу объявления о покупке в газете, лучше использовать реальную таблицу, набор вложенных таблиц или таблицу, полную div.

Я всегда буду использовать подделку div или divтаблица с отображением частей таблицы, когда они работают.

Когда они не работают или когда макет div разваливается при разных разрешениях экрана, я буду использовать реальную таблицу.Он никогда не развалится.

Эта хитрость W3C имела бы лучшее решение с кодом CSS, чтобы говорящий браузер не рассматривал настоящую таблицу как таблицу.

Я также лечутаблица комментариев, расположенная вокруг заголовка страницы в виде табличных данных, даже если она не числовая.Табличные данные могут включать в себя категориальные данные.

Одна из идей состоит в том, чтобы скрыть (с теми же цветами переднего плана и фона) заявление об отказе, говорящее слепому человеку игнорировать координаты таблицы, которые обеспечивает обозреватель, поскольку использование таблицы было вызваноотсутствие возможности заставить работать макет с divs.

Answer 4

Я нашел решение, используя jquery и table-layout: fixed.Вот моя скрипка: http://jsfiddle.net/emilianolch/5nvxv5ko/

HTML:

<div class="table">
    <div class="table-row">
        <div class="table-cell">
            top left cell
        </div>
        <div class="table-cell">
            top right cell
        </div>
    </div>
    <div class="table-row">
        <div class="table-cell colspan">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
    </div>
    <div class="table-row">
        <div class="table-cell">
            bottom left cell
        </div>
        <div class="table-cell">
            bottom right cell
        </div>
    </div>
</div>

CSS:

.table {
    display: table;
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
}

.table-row {
    display: table-row;
    border-collapse: collapse;
}

.table-cell {
    display: table-cell;
    padding: 5px;
    border: 1px solid black;
}

.table-cell.colspan {
    display: none;
    /* collapse border */
    margin-top: -1px;
    margin-bottom: -1px;
}

JS:

var rowWidth = $('.table-row:first').width();
var colWidth = $('.table-cell:first').width();
var marginRight = colWidth - rowWidth + 11;
$('.table-cell.colspan').css('margin-right', marginRight + 'px').show()

Answer 5

Одной из идей было бы использование абсолютного позиционирования.Относительное расположение обертки вокруг стола, тогда все абсолютное позиционирование становится центрированным по отношению к обертке.Увидеть ниже.Обратите внимание, что я определяю класс tableWrapper, который будет устанавливать позицию: относительный, затем определяю класс tableRow и - я предполагаю, вы установите .tableRow div {display: table-cell;} поэтому я не стал ставить класс на каждый div.Вам нужно будет найти способ не допустить перекрытия элемента div под ним, если его высота становится больше, чем у второго элемента div.Должно быть очень выполнимым.

<div class="tableWrapper">
  <div class="tableRow">
    <div>Column 1</div>
    <div>Column 2</div>
  </div>

  <div class="tableRow">
      <div style="border: 1px solid black; position: absolute; width: 100%;">appears like colspan=2</div>
      <div>&nbsp; (only here to force a row break before the next table row)</div>
  </div>

  <div class="tableRow">
    <div>Column 1</div>
    <div>Column 2</div>
  </div>
</div>

Answer 6

CSS3 имеет атрибут column-span .Но, пожалуйста, попробуйте использовать flexbox или css grid для макета.

Answer 7

Заголовок таблицы - хорошая идея, если вам нужен верхний и нижний колонтитулы независимо от ширины столбцов ... Абсолютное позиционирование прекрасно работает, за исключением случаев, когда ваш текст переносится по крайней мере один раз больше, чем другие ячейки в этой строке..

Итак, вот псевдо-решение, которое имеет заголовок между строками отзывчивой таблицы и обязательно должен иметь перевод строки в соответствии с содержимым заголовка таблицы (что важно, если таблица заполняется динамически).Я также включил в себя вид colspan (хотя и без точного перевода строки):

CSS:

.table
{   display:table;
    position:relative;
}
.table > .header
{   display:table-caption;
    position:absolute;
    left:0;
    right:0;
}
.table > .l50{right:50%;}
.table > .r50{left:50%;}

.table > .row{display:table-row;}

.table > .row > *{display:table-cell;}

/* We add an extra cell where neededed to allow or header repositioning using % instead of fixed units */
.table > .header + .row > :last-child
{   width:1%;
    max-width:1px;
    overflow:hidden;
    visibility:hidden;
}

.table > .header + .row > :last-child > div
{   float:left;
    display:inline;
    visibility:hidden;
    width:10000%;/* 100% = parent element width (1%) ⇒ 100*100% = gran-parent element width*/
}
.table > .header + .row > :last-child > div > .l50
.table > .header + .row > :last-child > div > .r50{width:5000%;}

/* No responsive line-feed thought it's possible using % to estimate the size the span should take but it's not accurate (see HTML render) */
.table > .row > div > .span{position:absolute;left:0;right:33%;}
/* THIS MAKES SURE TRADITIONAL CELLS ARE VISIBLE */
.table > .row > .top
{   position:relative;
    z-index:1;
}

http://jsfiddle.net/sp2U4/