Floating number of cells in the row




Explanation

What is unknown is the number of cells in a table row, or the number of cells varies from row to row, but they must all fit in a certain width. In this article I will tell and show an example of creating such table.

 

The trick

Determination of how many cells in a row, and the application of unique rules to them, is done in CSS using pseudo-selectors (:nth-of-type and :nth-last-of-type). That is why will work only on IE9 .

Next the example code, when cells can be 1,2,3 or 4.

  1. /* one item */
  2. div > span:nth-of-type(1):nth-last-of-type(1) {
  3. width: 100%;
  4. border-color: black;
  5. }
  6.  
  7. /* two items */
  8. div > span:nth-of-type(1):nth-last-of-type(2),
  9. div > span:nth-of-type(2):nth-last-of-type(1) {
  10. width: 50%;
  11. color: red;
  12. border-color: red;
  13. }
  14.  
  15. /* three items */
  16. div > span:nth-of-type(1):nth-last-of-type(3),
  17. div > span:nth-of-type(2):nth-last-of-type(2),
  18. div > span:nth-of-type(3):nth-last-of-type(1) {
  19. width: 33.3333%;
  20. color: green;
  21. border-color: green;
  22. }
  23.  
  24. /* four items */
  25. div > span:nth-of-type(1):nth-last-of-type(4),
  26. div > span:nth-of-type(2):nth-last-of-type(3),
  27. div > span:nth-of-type(3):nth-last-of-type(2),
  28. div > span:nth-of-type(4):nth-last-of-type(1) {
  29. width: 25%;
  30. color: blue;
  31. border-color: blue;
  32. }

 

Feature

The numbering of the selector :nth-of-type will be video, and :nth-last-of-type to the contrary. In the above example, I have taken into account the number of cells from 1 to 4. If necessary, you can add more.

Live demo
Download ZIP







Found comments - 0






Current text is converted to a smiley
:) :( :0 :@ :# :$ :? :] :[ :} :{ :k :p :x :| :Q :O :S :D :X :C :-) :-( :-0 :-# :-$ :-? :-] :-[ :-} :-{ :-o :-p :-x :-| :-Q :-O :-S :-D :-X :-C :-* :-r :-t :-i :-s :-j :-k :-l :-z :-\ :-/ :-I :-J :-K :-L :-Z ;) ;] ;} ;-) ;-] ;-} =) =( =0 =@ =# =$ =? =] =[ =} ={ =o =p =x =| =Q =O =S =D =X =C
:)

Designer avatar

Gender
Hairs/Hats Mouth
Eyes Glasses
Result