HTML colspan в CSS - PullRequest
       89

HTML colspan в CSS

233 голосов
/ 08 марта 2010

Я пытаюсь построить макет, подобный следующему:

+---+---+---+
|   |   |   |
+---+---+---+
|           |
+-----------+

где дно заполняет пространство верхнего ряда.

Если бы это была настоящая таблица, я мог бы легко сделать это с помощью <td colspan="3">, но, поскольку я просто создаю табличный макет , я не могу использовать теги <table>. Возможно ли это с помощью CSS?

Ответы [ 15 ]

401 голосов
/ 05 апреля 2010

Нет простого, элегантного аналога CSS для colspan.

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

51 голосов
/ 24 июня 2010

Насколько я знаю, в css нет colspan, но в ближайшем будущем будет column-span для многостолбцовой разметки, но, поскольку это только черновик в CSS3, вы можете проверить его в здесь. . В любом случае вы можете сделать обходной путь, используя div и span с табличным дисплеем, подобным этому.

Это будет HTML:

<div class="table">
  <div class="row">
    <span class="cell red first"></span>
    <span class="cell blue fill"></span>
    <span class="cell green last"></span>
  </div>
</div>
<div class="table">
  <div class="row">
    <span class="cell black"></span>
  </div>
</div>

И это будет CSS:

  /* this is to reproduce table-like structure
     for the sake of table-less layout. */
  .table { display:table; table-layout:fixed; width:100px; }
  .row { display:table-row; height:10px; }
  .cell { display:table-cell; }

  /* this is where the colspan tricks works. */
  span { width:100%; }

  /* below is for visual recognition test purposes only. */
  .red { background:red; }
  .blue { background:blue; }
  .green { background:green; }
  .black { background:black; }

  /* this is the benefit of using table display, it is able 
     to set the width of it's child object to fill the rest of 
     the parent width as in table */
  .first { width: 20px; }
  .last { width: 30px; }
  .fill { width: 100%; }

Единственная причина для использования этого трюка состоит в том, чтобы получить преимущество от поведения table-layout, я использую его много раз, если только установка div и span span на определенный процент не выполнила наши требования к дизайну.

Но если вам не нужно извлекать выгоду из поведения table-layout, то ответ durilai вам вполне подойдет.

18 голосов
/ 03 августа 2016

Другое предложение - использовать flexbox вместо таблиц в целом. Конечно, это «современный браузер», но это же 2016 год;)

По крайней мере, это может быть альтернативным решением для тех, кто ищет ответ на этот вопрос в наше время, так как оригинальный пост был с 2010 года.

Вот отличное руководство: https://css -tricks.com / snippets / css / a-guide-to-flexbox /

.table {
  border: 1px solid red;
  padding: 2px;
  max-width: 300px;
  display: flex;
  flex-flow: row wrap;
}
.table-cell {
  border: 1px solid blue;
  flex: 1 30%;
}
.colspan-3 {
  border: 1px solid green;
  flex: 1 100%;
}
<div class="table">
  <div class="table-cell">
    row 1 - cell 1
  </div>
  <div class="table-cell">
    row 1 - cell 2
  </div>
  <div class="table-cell">
    row 1 - cell 3
  </div>
  <div class="table-cell colspan-3">
    row 2 - cell 1 (spans 3 columns)
  </div>
</div>
7 голосов
/ 08 марта 2010
<div style="width: 100%;">
    <div style="float: left; width: 33%;">Row 1 - Cell 1</div>
    <div style="float: left; width: 34%;">Row 1 - Cell 2</div>
    <div style="float: left; width: 33%;">Row 1 - Cell 3</div>
</div>
<div style="clear: left; width: 100%;">
Row 2 - Cell 1
</div>
4 голосов
/ 08 марта 2010

Это не входит в сферу CSS. colspan описывает структуру содержимого страницы или дает некоторый смысл данным в таблице, которая является работой HTML.

3 голосов
/ 08 марта 2010

Вы можете попытаться использовать систему сетки, как http://960.gs/

Ваш код будет выглядеть примерно так, если вы используете макет «12 столбцов»:

<div class="container_12">
<div class="grid_4">1</div><div class="grid_4">2</div><div class="grid_4">3</div>
<div class="clear"></div>
<div class="grid_12">123</div>
</div>
1 голос
/ 14 июня 2018

Чтобы предоставить актуальный ответ: лучший способ сделать это сегодня - это использовать компоновку сетки CSS следующим образом:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "top-left top-middle top-right"
    "bottom bottom bottom"
}

.item-a {
  grid-area: top-left;
}
.item-b {
  grid-area: top-middle;
}
.item-c {
  grid-area: top-right;
}
.item-d {
  grid-area: bottom;
}
1 голос
/ 15 июля 2016

Попробуйте добавить display: table-cell; width: 1%; к элементу ячейки таблицы.

.table-cell {
  display: table-cell;
  width: 1%;
  padding: 4px;
  border: 1px solid #efefef;
}
<div class="table">
  <div class="table-cell">one</div>
  <div class="table-cell">two</div>
  <div class="table-cell">three</div>
  <div class="table-cell">four</div>
</div>
<div class="table">
  <div class="table-cell">one</div>
  <div class="table-cell">two</div>
  <div class="table-cell">three</div>
  <div class="table-cell">four</div>
</div>
<div class="table">
  <div class="table-cell">one</div>
</div>
1 голос
/ 02 января 2013
column-span: all; /* W3C */
-webkit-column-span: all; /* Safari & Chrome */
-moz-column-span: all; /* Firefox */
-ms-column-span: all; /* Internet Explorer */
-o-column-span: all; /* Opera */

http://www.quackit.com/css/css3/properties/css_column-span.cfm

0 голосов
/ 27 июня 2019

У меня был некоторый успех, хотя он опирается на несколько свойств для работы:

table-layout: fixed border-collapse: separate

и ширины ячеек, которые легко делятся / охватывают, то есть 4 ячейки шириной 25%:

.div-table-cell,
* {
  box-sizing: border-box;
}

.div-table {
  display: table;
  border: solid 1px #ccc;
  border-left: none;
  border-bottom: none;
  table-layout: fixed;
  margin: 10px auto;
  width: 50%;
  border-collapse: separate;
  background: #eee;
}

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

.div-table-cell {
  display: table-cell;
  padding: 15px;
  border-left: solid 1px #ccc;
  border-bottom: solid 1px #ccc;
  text-align: center;
  background: #ddd;
}

.colspan-3 {
  width: 300%;
  display: table;
  background: #eee;
}

.row-1 .div-table-cell:before {
  content: "row 1: ";
}

.row-2 .div-table-cell:before {
  content: "row 2: ";
}

.row-3 .div-table-cell:before {
  content: "row 3: ";
  font-weight: bold;
}

.div-table-row-at-the-top {
  display: table-header-group;
}
<div class="div-table">

  <div class="div-table-row row-1">

    <div class="div-table-cell">Cell 1</div>
    <div class="div-table-cell">Cell 2</div>
    <div class="div-table-cell">Cell 3</div>

  </div>

  <div class="div-table-row row-2">

    <div class="div-table-cell colspan-3">
      Cor blimey he's only gone and done it.
    </div>

  </div>

  <div class="div-table-row row-3">

    <div class="div-table-cell">Cell 1</div>
    <div class="div-table-cell">Cell 2</div>
    <div class="div-table-cell">Cell 3</div>

  </div>

</div>

https://jsfiddle.net/sfjw26rb/2/

Кроме того, применение display: table-header-group или table-footer-group - это удобный способ перемещения элементов строки в верхнюю / нижнюю часть таблицы.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...