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
How to Make ≪Div≫ Fill ≪Td≫ Height
Accessing Object in Iframe Using Vba
Assign an Initial Value to Radio Button as Checked
How to Align Two Elements on the Same Line Without Changing HTML
How to Style a Mouseover on an Image Map Using CSS
IE6 + IE7 CSS Problem with Overflow: Hidden; - Position: Relative; Combo
Prevent Bootstrap Modal from Disappearing When Clicking Outside or Pressing Escape
Regex Replace Text Outside HTML Tags
Javaserver Faces 2.2 and Html5 Support, Why Is Xhtml Still Being Used
Should a Heading Be Inside or Outside a ≪P≫
Hide Vertical Scrollbar in ≪Select≫ Element
How to Set Default Value to the Input[Type="Date"]
What's the Best Way to Set a Single Pixel in an HTML5 Canvas
Floating an Image to the Bottom Right with Text Wrapping Around