Colspan/Rowspan For Elements Whose Display Is Set to Table-Cell

Colspan/Rowspan for elements whose display is set to table-cell

As far as I know, the lack of colspan/rowspan is just one of the limitations of display:table. See this post:

http://www.onenaught.com/posts/201/use-css-displaytable-for-layout

Using display: table-cell is there a way of getting the colspan functionality?

No you cannot add colspan or rowspan to display:table-cell. It is one of the limitations in table-cell feature!

You can check the limitations in this reference link

http://www.onenaught.com/posts/201/use-css-displaytable-for-layout

If you want to bring the COLSPAN feature into table-cell, then you have to use table-row-group and table-caption feature as follows

display: table-caption

and

table-row-group;

Check this fiddle link : http://jsfiddle.net/ZQQY4/

Is it possible to set Colspan/Rowspan for elements whose display is set to table-cell

Nope, there is no css alternative for col/row-span attributes.

Use real tables or grid systems (e.g. 960gs) for tasks like this.

How can display table-row behave like colspan=3

Using display: table; it cannot be done (cause sadly there's no colspan: 3; or rowspan property in CSS, therefore stylesheet is unable to mimick a real <table> element)

but hey, flex to the rescue!

.row{  display: flex;  flex-flow: wrap;}.cell{  width: 25%;  background:#eee;}.colspan2{  flex: 2;}
<div class="row">  <div class="cell">Cell1</div>  <div class="cell">Cell2</div>  <div class="cell">Cell3</div>  <div class="cell">Cell4</div>  <div class="cell">Cell5</div>  <div class="cell colspan2">Cell6 Colspan2</div>  <div class="cell">Cell7</div></div>

colspan on cell do not work on collapse table when display none and again display: table-cell

details.style.display = "table-cell";

needs to be

details.style.display = "table-row";

DIV table colspan: how?

I would imagine that this would be covered by CSS Tables, a specification which, while mentioned on the CSS homepage, appears to currently be at a state of "not yet published in any form"

In practical terms, you can't achieve this at present.

How to imitate table's colspan using div with CSS?

I suggest to look at Flexbox. It's much easier to create columns.

 // CSS //
.flexcontainer {
display: flex;
flex-direction: row;
}

// HTML //
<body>
<div class="flexcontainer">
<div>column1</div>

<div>column2</div>
</div>
</body>

Starting rowspan and colspan from a given cell and reduce padding of rowspan

Create a 2x2 "filler" cell. Then start the column label cell one <tr> later. You basically have two header rows running horizontally, hence starting the vertical header row in the third <tr>.

table,th,td {  border: 1px solid black;  border-collapse: collapse;}
<table style="width:50%">  <tr>    <th colspan="2" rowspan="2"></th>    <th colspan="17">Weight, in Kg</th>  </tr>  <tr>    <th>40</th>    <th>45</th>    <th>50</th>    <th>55</th>    <th>60</th>    <th>65</th>    <th>70</th>    <th>75</th>    <th>80</th>    <th>85</th>    <th>90</th>    <th>95</th>    <th>100</th>    <th>105</th>    <th>110</th>  </tr>  <tr>    <th rowspan="11">Height, in cm</th>    <th>160</th>    <td>15</td>    <td>17</td>    <td>19</td>    <td>21</td>    <td>23</td>    <td>25</td>    <td>27</td>    <td>29</td>    <td>31</td>    <td>33</td>    <td>35</td>    <td>37</td>    <td>39</td>    <td>41</td>    <td>42</td>  </tr>  <tr>    <th>165</th>    <td>14</td>    <td>16</td>    <td>18</td>    <td>20</td>    <td>22</td>    <td>23</td>    <td>25</td>    <td>27</td>    <td>29</td>    <td>31</td>    <td>33</td>    <td>34</td>    <td>36</td>    <td>38</td>    <td>40</td>  </tr>  <tr>    <th>170</th>    <td>13</td>    <td>15</td>    <td>17</td>    <td>19</td>    <td>20</td>    <td>22</td>    <td>24</td>    <td>25</td>    <td>27</td>    <td>29</td>    <td>31</td>    <td>32</td>    <td>34</td>    <td>36</td>    <td>38</td>  </tr>  <tr>    <th>175</th>    <td>13</td>    <td>14</td>    <td>16</td>    <td>17</td>    <td>19</td>    <td>21</td>    <td>22</td>    <td>24</td>    <td>26</td>    <td>27</td>    <td>29</td>    <td>31</td>    <td>32</td>    <td>34</td>    <td>35</td>  </tr>  <tr>    <th>180</th>    <td>12</td>    <td>13</td>    <td>15</td>    <td>16</td>    <td>18</td>    <td>20</td>    <td>21</td>    <td>23</td>    <td>24</td>    <td>26</td>    <td>27</td>    <td>29</td>    <td>30</td>    <td>32</td>    <td>33</td>  </tr>  <tr>    <th>185</th>    <td>11</td>    <td>13</td>    <td>14</td>    <td>16</td>    <td>17</td>    <td>18</td>    <td>20</td>    <td>21</td>    <td>23</td>    <td>24</td>    <td>26</td>    <td>27</td>    <td>29</td>    <td>30</td>    <td>32</td>  </tr>  <tr>    <th>190</th>    <td>11</td>    <td>12</td>    <td>13</td>    <td>15</td>    <td>16</td>    <td>18</td>    <td>19</td>    <td>20</td>    <td>22</td>    <td>23</td>    <td>24</td>    <td>26</td>    <td>27</td>    <td>29</td>    <td>30</td>  </tr>  <tr>    <th>195</th>    <td>10</td>    <td>11</td>    <td>13</td>    <td>14</td>    <td>15</td>    <td>17</td>    <td>18</td>    <td>19</td>    <td>21</td>    <td>22</td>    <td>23</td>    <td>24</td>    <td>26</td>    <td>27</td>    <td>28</td>  </tr>  <tr>    <th>200</th>    <td>10</td>    <td>11</td>    <td>12</td>    <td>13</td>    <td>15</td>    <td>16</td>    <td>17</td>    <td>18</td>    <td>20</td>    <td>21</td>    <td>22</td>    <td>23</td>    <td>25</td>    <td>26</td>    <td>27</td>  </tr></table>


Related Topics



Leave a reply



Submit