Подтвердить что ты не робот

Table-cell - какой-то colspan?

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

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

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

Ответ 2

Одной из идей было бы использовать абсолютное позиционирование. Относительное расположение обертки вокруг стола, тогда все абсолютное позиционирование становится координатным по отношению к обертке. Смотри ниже. Заметьте, что я определяю класс tableWrapper, который будет задан положением: относительный, затем определит класс tableRow и - я предполагаю, что вы установите. TableRow div {display: table-cell; }, поэтому я не стал класть класс на каждый div. Вам нужно будет найти способ помешать ему перекрывать div ниже него, если высота становится больше, чем 2-й 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>

Ответ 3

Я нашел решение с использованием 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()

Ответ 4

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

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

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

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

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

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

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

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

Ответ 5

В зависимости от ваших потребностей макет 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

Ответ 6

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

Итак, здесь псевдо-решение должно иметь заголовок между строками реагирующей таблицы и быть уверенным, что строка-строка соответствует содержимому заголовка таблицы (что важно, если таблица заполняется динамически). Я также включил сорт 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 possible using % to estimate the size the span should take but it 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/

Ответ 7

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