HTML colspan в CSS

251

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

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

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

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

башня
источник
8
Лучшее решение действительно зависит от того, что входит в таблицу. Если это данные (то, что принадлежит таблице), тогда используйте таблицу. Если вы используете таблицу для управления макетом страницы, тогда лучше использовать одно из приведенных ниже решений HTML + CSS.
mwcz
Добавьте разметку для обоих случаев, а затем покажите только по одному, используя CSS-класс медиазапроса.
DigitalDesignDj
2
Забудьте о CSS. Если вы отображаете табличные данные, вы наверняка знаете, сколько столбцов они будут охватывать. Используйте colspanатрибут
Тихомир Митков
Я сделал бы это с помощью начальной загрузки или настроенной сетки из начальной загрузки
Арун Прасад ES
Если вы используете CSS3, вы можете использовать columnSpan. В отличие от <td colspan = "#">, у вас нет возможности установить количество столбцов, но вы можете охватить все столбцы. w3schools.com/cssref/css3_pr_column-span.asp
MistyDawn

Ответы:

407

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

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

Дэвид
источник
10
Таблицы являются структурными элементами, и то, что использование colspan меняет свой внешний вид, не означает, что это не так. CSS используется для стилизации элементов, а не для изменения структуры. W3C обсуждает структуру таблицы здесь: w3.org/TR/html401/struct/tables.html#h-11.2
Роб
88
Роб, пойми свою позицию, но посмотри рекомендации W3C, конкретно относящиеся ко всей парадигме таблицы, и ты увидишь, что частью их рассмотрения было, безусловно, представление таблиц. Эта идея о том, что таблицы были задуманны как структура, является современной выдумкой, и я думаю, что нам всем лучше было бы перестать распространяться. Дело в том, что нам нужно перестать быть догматичными в отношении таблиц. Для меня было бы неправильно говорить, что они всегда представляют, и для вас также неправильно говорить, что они всегда структурированы. Реальность попросту не такая строгая.
Дэвид
4
Похоже, ваш ответ является популярным ответом. :) Я рад узнать, что догматическая таблица (которую я приобрел) слишком строга. Я поддерживаю свой ответ только постольку, поскольку я все еще думаю, что colspanэто правильный инструмент для работы. Мой ответ был на 75% правильным, а ваш - на 100% правильным. Вы должны вернуться в ТАК.
mwcz
71
Через 2 года я гуглил это и хотел проголосовать за автора, но там было написано «не могу голосовать за свой пост», и я понял, что это я, смеюсь. Я решил поменять принятое решение на это, так как считаю, что в нем больше информации.
Башня
14
Это мини-эссе о каком-то другом (неуказанном) ответе, а не ответ на заданный вопрос.
Юкка К. Корпела
56

Насколько я знаю, в 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поведения, то ответ Дурилай подойдет вам достаточно.

Хендра Узия
источник
4
Да, но немного исправить: вместо .span { ...этого должно быть span { ....
Славик Мельцер
2
Использование divтегов для отображения табличных данных так же плохо, как использование tables для управления макетом страницы
Тихомир Митков,
1
@TichomirMitkov зависит от того, используете ли вы адаптивный дизайн для изменения макета - в этом случае иногда это может работать довольно хорошо.
Simon_Weaver
4
Это на самом деле не отвечает на вопрос, так как в приведенном вами примере у вас по существу две таблицы друг за другом. (Итд два div с классом "таблица")
зима
21

Еще одно предложение - использовать 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>

зима
источник
8
<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>
Дастин Лэйн
источник
Я не могу знать ширину клеток.
Башня
1
Тогда не ставьте ширину. Это не должно иметь значения. Но если вы хотите, чтобы они занимали одинаковую ширину, тогда два основных элемента должны иметь одинаковую ширину.
Дастин Лэйн
1
Вы можете использовать width: calc (100% / 3), что будет немного лучше, чем увеличение средней на 1%
ii iml0sto1
5

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

mwcz
источник
OP явно упоминает «создание табличного макета », без конструктивного значения. Разве это не само назначение таблиц CSS? Нет никакой объективной причины рассматривать свойство colspan иначе, чем вся таблица, если есть элемент таблицы CSS только для дизайна, почему бы не свойство colspan CSS только для дизайна…
Skippy le Grand Gourou
2
Ознакомьтесь с ответом на этот вопрос. Ваше мнение там уже обсуждается, и я склонен с этим согласиться. Мое мнение по этому вопросу определенно изменилось за пять лет, с тех пор как я написал этот ответ.
Mwcz
4

Чтобы предоставить актуальный ответ: лучший способ сделать это сегодня - это использовать компоновку сетки 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;
}

и HTML

<div class="item-a">1</div>
<div class="item-b">2</div>
<div class="item-c">3</div>
<div class="item-d">123</div>
Тоби 1 Кеноби
источник
3

Вы можете попытаться использовать систему сетки, как 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>
Джефф
источник
3

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

Исмаил Фарук
источник
как это поможет? Фундаментальная концепция таблицы состоит в том, что каждая строка имеет идентичные ячейки. Если в одной из строк есть ячейка, в которой успешно реализована «ширина: 1%», то все строки будут иметь этот столбец как «ширина: 1%». Смысл «colspan» состоит в том, чтобы взять 2 (или более) столбца фиксированной ширины и объединить их, чтобы получить общую ширину.
IAM_AL_X
3

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

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 - это удобный способ переместить элементы строки в верхнюю / нижнюю часть таблицы.

user3464561
источник
0

если вы используете div и span, он будет занимать больший размер кода, когда строка таблицы данных больше по объему. Этот код ниже проверен во всех браузерах

HTML:

<div id="gridheading">
<h4>Sl.No</h4><h4 class="big">Name</h4><h4>Location</h4><h4>column</h4><h4>column</h4><h4>column</h4><h4>Amount(Rs)</h4><h4>View</h4><h4>Edit</h4><h4>Delete</h4> 
</div>
<div class="data"> 
<h4>01</h4><h4 class="big">test</h4><h4>TVM</h4><h4>A</h4><h4>I</h4><h4>4575</h4><h4>4575</h4></div>
<div class="data"> 
<h4>01</h4><h4 class="big">test</h4><h4>TVM</h4><h4>A</h4><h4>I</h4><h4>4575</h4><h4>4575</h4></div>

CSS:

#gridheading {
    background: #ccc;
    border-bottom: 1px dotted #BBBBBB;
    font-size: 12px;
    line-height: 30px;
    text-transform: capitalize;
}
.data {
    border-bottom: 1px dotted #BBBBBB;
    display: block;
    font-weight: normal;
    line-height: 20px;
    text-align: left;
    word-wrap: break-word;
}
 h4 {
    border-right: thin dotted #000000;
    display: table-cell;
    margin-right: 100px;
    text-align: center;
    width: 100px;
    word-wrap: break-word;
}
.data .big {
    margin-right: 150px;
    width: 200px;
}
Веб-дизайнер и промоутер
источник
0
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

Адам Хантер Пек
источник
недостаточно поддержки ... IE8, к сожалению, все еще остается проблемой эволюции
beauXjames,
9
ОП хочет иметь table-cellинтервал в несколько столбцов таблицы. column-spanдля управления макетом столбца. Что позволяет вам передавать текст по нескольким столбцам, как это делают газеты.
Крис Весселинг
1
Действительно - хотя это было бы действительно хорошо для использования на дисплее: table-cell; элементы, это относится только к css-столбцам: jsfiddle.net/mk0rrLc3/1
Марк
@ Mark-- column-span используется со свойством column-count, определенным для родителя. Нет необходимости менять тип дисплея. Кроме того, column-span может принимать только 1 или все в качестве значения, он не допускает дробление, поэтому «column-span: 2», как видно из вашей скрипки, не является допустимым использованием свойства.
MistyDawn
0

Если вы пришли сюда, потому что вы должны включить или отключить colspanатрибут (скажем, для мобильного макета):

Дублируйте <td>и покажите только те, которые имеют желаемое colspan:

table.colspan--on td.single {
  display: none;
}

table.colspan--off td.both {
  display: none;
}
<!-- simple table -->
<table class="colspan--on">
  <thead>
    <th>col 1</th>
    <th>col 2</th>
  </thead>
  <tbody>
    <tr>
      <!-- normal row -->
      <td>a</td>
      <td>b</td>
    </tr>
    <tr>
      <!-- the <td> spanning both columns -->
      <td class="both" colspan="2">both</td>

      <!-- the two single-column <td>s -->
      <td class="single">A</td>
      <td class="single">B</td>
    </tr>
    <tr>
      <!-- normal row -->
      <td>a</td>
      <td>b</td>
    </tr>
  </tbody>
</table>
<!--
that's all
-->

 

<!--
stuff only needed for making this interactive example looking good:
-->
<br><br>
<button onclick="toggle()">Toggle colspan</button>
<script>/*toggle classes*/var tableClasses = document.querySelector('table').classList;
function toggle() {
  tableClasses.toggle('colspan--on');
  tableClasses.toggle('colspan--off');
}
</script>
<style>/* some not-needed styles to make this example more appealing */
td {text-align: center;}
table, td, th {border-collapse: collapse; border: 1px solid black;}</style>

luckydonald
источник
0

Свойства CSS «column-count», «column-gap» и «column-span» могут сделать это таким образом, чтобы все столбцы псевдотаблицы находились в одной оболочке (HTML остается красивым и аккуратным).

Единственное предостережение в том, что вы можете определить только 1 столбец или все столбцы, а span-span столбца еще не работает в Firefox, поэтому для обеспечения правильного отображения необходим дополнительный CSS. https://www.w3schools.com/css/css3_multiple_columns.asp

.split-me {
  -webkit-column-count: 3;
  -webkit-column-gap: 0;
  -moz-column-count: 3;
  -moz-column-gap: 0;
  column-count: 3;
  column-gap: 0;
}

.cols {
  /* column-span is 1 by default */
  column-span: 1;
}

div.three-span {
  column-span: all !important;
}

/* alternate style for column-span in Firefox */
@-moz-document url-prefix(){
  .three-span {
    position: absolute;
    left: 8px;
    right: 8px;
    top: auto;
    width: auto;
  }
}


    
<p>The column width stays fully dynamic, just like flex-box, evenly scaling on resize.</p>

<div class='split-me'>
  <div class='col-1 cols'>Text inside Column 1 div.</div>
  <div class='col-2 cols'>Text inside Column 2 div.</div>
  <div class='col-3 cols'>Text inside Column 3 div.</div>
  <div class='three-span'>Text div spanning 3 columns.</div>
</div>



  <style>
/* Non-Essential Visual Styles */

html * { font-size: 12pt; font-family: Arial; text-align: center; }
.split-me>* { padding: 5px; } 
.cols { border: 2px dashed black; border-left: none; }
.col-1 { background-color: #ddffff; border-left: 2px dashed black; }
.col-2 { background-color: #ffddff; }
.col-3 { background-color: #ffffdd; }
.three-span {
  border: 2px dashed black; border-top: none;
  text-align: center; background-color: #ddffdd;
}
  </style>

MistyDawn
источник
0

Я пришел сюда, потому что в настоящее время блок таблицы WordPress не поддерживает параметр colspan, и я подумал, что заменю его с помощью CSS. Это было мое решение, предполагая, что столбцы имеют одинаковую ширину:

table {
  width: 100%;
}

table td {
  width: 50%;
  background: #dbdbdb;
  text-align: center;
}

table tr:nth-child(2n+1) {
  position:relative;
  display:block;
  height:20px;
  background:green;
}

table tr:nth-child(2n+1) td {
  position:absolute;
  left:0;
  right:-100%;
  width: auto;
  top:0;
  bottom:0;
  background:red;
  text-align:center;
}
<table>
    <tr>
        <td>row</td>
    </tr>
    <tr>
        <td>cell</td>
        <td>cell</td>
    </tr>
    <tr>
        <td>row</td>
    </tr>
    <tr>
        <td>cell</td>
        <td>cell</td>
    </tr>
</table>

passatgt
источник
-1

Вы всегда можете position:absolute;вещи и указать ширину. Это не очень плавный способ сделать это, но это сработает.

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

Я создал эту скрипку:

введите описание изображения здесь

http://jsfiddle.net/wo40ev18/3/

HTML

<div id="table">
<div class="caption">
    Center Caption
</div>
<div class="group">
      <div class="row">
            <div class="cell">Link 1t</div>
            <div class="cell"></div>
          <div class="cell"></div>
          <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell ">Link 2</div>
      </div>
</div>

CSS

   #table {
    display:table;
}

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

.row {
    display:table-row;
    height: 80px;
    line-height: 80px;
}

.cell {
    display:table-cell;
    width:1%;
    text-align: center;
    border:1px solid grey;
    height: 80px
        line-height: 80px;
}

.caption {
    border:1px solid red; caption-side: top; display: table-caption; text-align: center; 
    position: relative;
    top: 80px;
    height: 80px;
      height: 80px;
    line-height: 80px;

}
Layke
источник
1
Но я думаю, что стартовая сетка может сделать это очень легко
Arun Prasad ES
Это не обеспечивает решение, которое искал аскер. Он просто создает ряд строк.
MistyDawn
-1

Классы Media Query могут использоваться для достижения чего-то сносного с двойной разметкой. Вот мой подход с начальной загрузкой:

  <tr class="total">
    <td colspan="1" class="visible-xs"></td>
    <td colspan="5" class="hidden-xs"></td>
    <td class="focus">Total</td>
    <td class="focus" colspan="2"><%= number_to_currency @cart.total %></td>
  </tr>

colspan 1 для мобильных устройств, colspan 5 для других, в которых CSS работает.

DigitalDesignDj
источник
Аскер специально заявил, что не может использовать элементы HTML <table>. Если бы он мог, это было бы легко решить.
MistyDawn