HTML colspan in CSS

Question

I m trying to construct a layout similar to the following    --- --- ---                 --- --- ---                 -----------    where the bottom is filling the space of the upper row   If this were an actual table  I could easily accomplish this with  lt td colspan  3  gt   but as I m simply creating a table-like layout  I cannot use  lt table gt  tags  Is this possible using CSS

User · Answer

I came here because currently the WordPress table block doesn't support the colspan parameter and i thought i will replace it using CSS. This was my solution, assuming that the columns are the same width:

_x000D_

table {_x000D_
  width: 100%;_x000D_
}_x000D_
_x000D_
table td {_x000D_
  width: 50%;_x000D_
  background: #dbdbdb;_x000D_
  text-align: center;_x000D_
}_x000D_
_x000D_
table tr:nth-child(2n+1) {_x000D_
  position:relative;_x000D_
  display:block;_x000D_
  height:20px;_x000D_
  background:green;_x000D_
}_x000D_
_x000D_
table tr:nth-child(2n+1) td {_x000D_
  position:absolute;_x000D_
  left:0;_x000D_
  right:-100%;_x000D_
  width: auto;_x000D_
  top:0;_x000D_
  bottom:0;_x000D_
  background:red;_x000D_
  text-align:center;_x000D_
}

_x000D_

<table>_x000D_
    <tr>_x000D_
        <td>row</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
        <td>cell</td>_x000D_
        <td>cell</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
        <td>row</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
        <td>cell</td>_x000D_
        <td>cell</td>_x000D_
    </tr>_x000D_
</table>

_x000D_

User · Answer

If you come here because you have to turn on or off the colspan attribute  say for a mobile layout    Duplicate the  lt td gt s and only show the ones with the desired colspan    x000D   x000D  table colspan--on td single   x000D    display  none  x000D    x000D   x000D  table colspan--off td both   x000D    display  none  x000D    x000D   lt  -- simple table -- gt  x000D   lt table class  colspan--on  gt  x000D     lt thead gt  x000D       lt th gt col 1 lt  th gt  x000D       lt th gt col 2 lt  th gt  x000D     lt  thead gt  x000D     lt tbody gt  x000D       lt tr gt  x000D         lt  -- normal row -- gt  x000D         lt td gt a lt  td gt  x000D         lt td gt b lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt  -- the  lt td gt  spanning both columns -- gt  x000D         lt td class  both  colspan  2  gt both lt  td gt  x000D   x000D         lt  -- the two single-column  lt td gt s -- gt  x000D         lt td class  single  gt A lt  td gt  x000D         lt td class  single  gt B lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt  -- normal row -- gt  x000D         lt td gt a lt  td gt  x000D         lt td gt b lt  td gt  x000D       lt  tr gt  x000D     lt  tbody gt  x000D   lt  table gt  x000D   lt  -- x000D  that s all x000D  -- gt  x000D   x000D     x000D   x000D   lt  -- x000D  stuff only needed for making this interactive example looking good  x000D  -- gt  x000D   lt br gt  lt br gt  x000D   lt button onclick  toggle    gt Toggle colspan lt  button gt  x000D   lt script gt   toggle classes  var tableClasses   document querySelector  table   classList  x000D  function toggle     x000D    tableClasses toggle  colspan--on    x000D    tableClasses toggle  colspan--off    x000D    x000D   lt  script gt  x000D   lt style gt    some not-needed styles to make this example more appealing    x000D  td  text-align  center   x000D  table  td  th  border-collapse  collapse  border  1px solid black   lt  style gt  x000D   x000D   x000D

User · Answer

lt div style  width  100    gt       lt div style  float  left  width  33    gt Row 1 - Cell 1 lt  div gt       lt div style  float  left  width  34    gt Row 1 - Cell 2 lt  div gt       lt div style  float  left  width  33    gt Row 1 - Cell 3 lt  div gt   lt  div gt   lt div style  clear  left  width  100    gt  Row 2 - Cell 1  lt  div gt

User · Answer

Media Query classes can be used to achieve something passable with duplicate markup  Here s my approach with bootstrap      lt tr class  total  gt       lt td colspan  1  class  visible-xs  gt  lt  td gt       lt td colspan  5  class  hidden-xs  gt  lt  td gt       lt td class  focus  gt Total lt  td gt       lt td class  focus  colspan  2  gt  lt    number to currency  cart total   gt  lt  td gt     lt  tr gt    colspan 1 for mobile  colspan 5 for others with CSS doing the work

User · Answer

You could trying using a grid system like http   960 gs   Your code would be something like this  assuming you re using a  12 column  layout    lt div class  container 12  gt   lt div class  grid 4  gt 1 lt  div gt  lt div class  grid 4  gt 2 lt  div gt  lt div class  grid 4  gt 3 lt  div gt   lt div class  clear  gt  lt  div gt   lt div class  grid 12  gt 123 lt  div gt   lt  div gt

User · Answer

You could always position absolute  things and specify widths   It s not a very fluid way of doing it  but it would work

User · Answer

There is no colspan in css as far as I know  but there will be column-span for multi column layout in the near future  but since it is only a draft in CSS3  you can check it in here  Anyway you can do a workaround using div and span with table-like display like this     This would be the HTML    lt div class  table  gt     lt div class  row  gt       lt span class  cell red first  gt  lt  span gt       lt span class  cell blue fill  gt  lt  span gt       lt span class  cell green last  gt  lt  span gt     lt  div gt   lt  div gt   lt div class  table  gt     lt div class  row  gt       lt span class  cell black  gt  lt  span gt     lt  div gt   lt  div gt    And this would be the 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       The only reason to use this trick is to gain the benefit of table-layout behaviour  I use it alot if only setting div and span width to certain percentage didn t fullfil our design requirement   But if you don t need to benefit from the table-layout behaviour  then durilai s answer would suit you enough

User · Answer

The CSS properties  column-count    column-gap   and  column-span  can do this in a way that keeps all the columns of the pseudo-table inside the same wrapper  HTML stays nice and neat    The only caveats are that you can only define 1 column or all columns  and column-span doesn t yet work in Firefox  so some additional CSS is necessary to ensure it will displays correctly  https   www w3schools com css css3 multiple columns asp   x000D   x000D   split-me   x000D    -webkit-column-count  3  x000D    -webkit-column-gap  0  x000D    -moz-column-count  3  x000D    -moz-column-gap  0  x000D    column-count  3  x000D    column-gap  0  x000D    x000D   x000D   cols   x000D       column-span is 1 by default    x000D    column-span  1  x000D    x000D   x000D  div three-span   x000D    column-span  all  important  x000D    x000D   x000D     alternate style for column-span in Firefox    x000D   -moz-document url-prefix    x000D     three-span   x000D      position  absolute  x000D      left  8px  x000D      right  8px  x000D      top  auto  x000D      width  auto  x000D      x000D    x000D   x000D   x000D       x000D   lt p gt The column width stays fully dynamic  just like flex-box  evenly scaling on resize  lt  p gt  x000D   x000D   lt div class  split-me  gt  x000D     lt div class  col-1 cols  gt Text inside Column 1 div  lt  div gt  x000D     lt div class  col-2 cols  gt Text inside Column 2 div  lt  div gt  x000D     lt div class  col-3 cols  gt Text inside Column 3 div  lt  div gt  x000D     lt div class  three-span  gt Text div spanning 3 columns  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D   x000D     lt style gt  x000D     Non-Essential Visual Styles    x000D   x000D  html     font-size  12pt  font-family  Arial  text-align  center    x000D   split-me gt     padding  5px     x000D   cols   border  2px dashed black  border-left  none    x000D   col-1   background-color   ddffff  border-left  2px dashed black    x000D   col-2   background-color   ffddff    x000D   col-3   background-color   ffffdd    x000D   three-span   x000D    border  2px dashed black  border-top  none  x000D    text-align  center  background-color   ddffdd  x000D    x000D     lt  style gt  x000D   x000D   x000D

User · Answer

I ve created this fiddle     http   jsfiddle net wo40ev18 3   HTML   lt div id  table  gt   lt div class  caption  gt      Center Caption  lt  div gt   lt div class  group  gt         lt div class  row  gt               lt div class  cell  gt Link 1t lt  div gt               lt div class  cell  gt  lt  div gt             lt div class  cell  gt  lt  div gt             lt div class  cell  gt  lt  div gt               lt div class  cell  gt  lt  div gt               lt div class  cell   gt Link 2 lt  div gt         lt  div gt   lt  div gt       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

User · Answer

Try adding display  table-cell   width  1   to your table cell element    x000D   x000D   table-cell   x000D    display  table-cell  x000D    width  1   x000D    padding  4px  x000D    border  1px solid  efefef  x000D    x000D   lt div class  table  gt  x000D     lt div class  table-cell  gt one lt  div gt  x000D     lt div class  table-cell  gt two lt  div gt  x000D     lt div class  table-cell  gt three lt  div gt  x000D     lt div class  table-cell  gt four lt  div gt  x000D   lt  div gt  x000D   lt div class  table  gt  x000D     lt div class  table-cell  gt one lt  div gt  x000D     lt div class  table-cell  gt two lt  div gt  x000D     lt div class  table-cell  gt three lt  div gt  x000D     lt div class  table-cell  gt four lt  div gt  x000D   lt  div gt  x000D   lt div class  table  gt  x000D     lt div class  table-cell  gt one lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

To provide an up-to-date answer  The best way to do this today is to use css grid layout like this   container     display  grid    grid-template-columns  1fr 1fr 1fr    grid-template-rows  auto    grid-template-areas        quot top-left top-middle top-right quot       quot bottom bottom bottom quot      item-a     grid-area  top-left     item-b     grid-area  top-middle     item-c     grid-area  top-right     item-d     grid-area  bottom     and the HTML  lt div class  quot container quot  gt     lt div class  quot item-a quot  gt 1 lt  div gt     lt div class  quot item-b quot  gt 2 lt  div gt     lt div class  quot item-c quot  gt 3 lt  div gt     lt div class  quot item-d quot  gt 123 lt  div gt   lt  div gt

User · Answer

Another suggestion is using flexbox instead of tables altogether  This is a  modern browser  thing of course  but come on  it s 2016     At least this might be an alternative solution for those looking for an answer to this nowadays  since the original post was from 2010   Here s a great guide  https   css-tricks com snippets css a-guide-to-flexbox    x000D   x000D   table   x000D    border  1px solid red  x000D    padding  2px  x000D    max-width  300px  x000D    display  flex  x000D    flex-flow  row wrap  x000D    x000D   table-cell   x000D    border  1px solid blue  x000D    flex  1 30   x000D    x000D   colspan-3   x000D    border  1px solid green  x000D    flex  1 100   x000D    x000D   lt div class  table  gt  x000D     lt div class  table-cell  gt  x000D      row 1 - cell 1 x000D     lt  div gt  x000D     lt div class  table-cell  gt  x000D      row 1 - cell 2 x000D     lt  div gt  x000D     lt div class  table-cell  gt  x000D      row 1 - cell 3 x000D     lt  div gt  x000D     lt div class  table-cell colspan-3  gt  x000D      row 2 - cell 1  spans 3 columns  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I ve had some success  although it relies on a few properties to work    table-layout  fixed border-collapse  separate  and cell  widths  that divide span easily  i e  4 x cells of 25  width    x000D   x000D   div-table-cell  x000D      x000D    box-sizing  border-box  x000D    x000D   x000D   div-table   x000D    display  table  x000D    border  solid 1px  ccc  x000D    border-left  none  x000D    border-bottom  none  x000D    table-layout  fixed  x000D    margin  10px auto  x000D    width  50   x000D    border-collapse  separate  x000D    background   eee  x000D    x000D   x000D   div-table-row   x000D    display  table-row  x000D    x000D   x000D   div-table-cell   x000D    display  table-cell  x000D    padding  15px  x000D    border-left  solid 1px  ccc  x000D    border-bottom  solid 1px  ccc  x000D    text-align  center  x000D    background   ddd  x000D    x000D   x000D   colspan-3   x000D    width  300   x000D    display  table  x000D    background   eee  x000D    x000D   x000D   row-1  div-table-cell before   x000D    content   row 1     x000D    x000D   x000D   row-2  div-table-cell before   x000D    content   row 2     x000D    x000D   x000D   row-3  div-table-cell before   x000D    content   row 3     x000D    font-weight  bold  x000D    x000D   x000D   div-table-row-at-the-top   x000D    display  table-header-group  x000D    x000D   lt div class  div-table  gt  x000D   x000D     lt div class  div-table-row row-1  gt  x000D   x000D       lt div class  div-table-cell  gt Cell 1 lt  div gt  x000D       lt div class  div-table-cell  gt Cell 2 lt  div gt  x000D       lt div class  div-table-cell  gt Cell 3 lt  div gt  x000D   x000D     lt  div gt  x000D   x000D     lt div class  div-table-row row-2  gt  x000D   x000D       lt div class  div-table-cell colspan-3  gt  x000D        Cor blimey he s only gone and done it  x000D       lt  div gt  x000D   x000D     lt  div gt  x000D   x000D     lt div class  div-table-row row-3  gt  x000D   x000D       lt div class  div-table-cell  gt Cell 1 lt  div gt  x000D       lt div class  div-table-cell  gt Cell 2 lt  div gt  x000D       lt div class  div-table-cell  gt Cell 3 lt  div gt  x000D   x000D     lt  div gt  x000D   x000D   lt  div gt  x000D   x000D   x000D    https   jsfiddle net sfjw26rb 2   Also  applying display table-header-group or table-footer-group is a handy way of jumping  row  elements to the top bottom of the  table

User · Answer

if you use div and span it will occupy more code size when the datagrid-table row are more in volume  This below code  is checked in all browsers  HTML    lt div id  gridheading  gt   lt h4 gt Sl No lt  h4 gt  lt h4 class  big  gt Name lt  h4 gt  lt h4 gt Location lt  h4 gt  lt h4 gt column lt  h4 gt  lt h4 gt column lt  h4 gt  lt h4 gt column lt  h4 gt  lt h4 gt Amount Rs  lt  h4 gt  lt h4 gt View lt  h4 gt  lt h4 gt Edit lt  h4 gt  lt h4 gt Delete lt  h4 gt    lt  div gt   lt div class  data  gt    lt h4 gt 01 lt  h4 gt  lt h4 class  big  gt test lt  h4 gt  lt h4 gt TVM lt  h4 gt  lt h4 gt A lt  h4 gt  lt h4 gt I lt  h4 gt  lt h4 gt 4575 lt  h4 gt  lt h4 gt 4575 lt  h4 gt  lt  div gt   lt div class  data  gt    lt h4 gt 01 lt  h4 gt  lt h4 class  big  gt test lt  h4 gt  lt h4 gt TVM lt  h4 gt  lt h4 gt A lt  h4 gt  lt h4 gt I lt  h4 gt  lt h4 gt 4575 lt  h4 gt  lt h4 gt 4575 lt  h4 gt  lt  div gt    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

User · Answer

There s no simple  elegant CSS analog for colspan   Searches on this very issue will return a variety of solutions that include a bevy of alternatives  including absolute positioning  sizing  along with a similar variety of browser- and circumstance-specific caveats  Read  and make the best informed decision you can based on what you find

User · Answer

That isn t part of the purview of CSS   colspan describes the structure of the page s content  or gives some meaning to the data in the table  which is HTML s job

User · Answer

column-span  all     W3C    -webkit-column-span  all     Safari  amp  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

[css] HTML colspan in CSS

Examples related to css