Tauras Tauras - 1 month ago 6
CSS Question

How to set 100% width to first table td and make other td's to be below first td

I need to make first

td
100% wide (which has image included) and put other
td's
below first
td
. How to do this without changing HTML?

This is what I have:

#katalogas { float:left; width:100%; }
#katalogas .lentele { border-collapse:collapse; width:100% !important; }
#katalogas table.lentele tbody tr:nth-of-type(1) td { width:25% !important; border:1px dashed black; }


Jsfiddle

Any way to do this?

Answer

I made it work this far ... tested in latest Chrome, FF, IE/Edge

DEMO

where I added the following to your fiddle css:

/* new css added ... */
#katalogas .lentele { position:relative; margin-top: 150px }
#katalogas .lentele img { position: absolute; top: -150px; }
#katalogas table.lentele tbody tr:nth-of-type(1) td:nth-of-type(1) { width: 0 !important; border: 0 }

This works if you can set the same height on all images, if not, each that does not, need to be addressed individually, though like less than 200 :)

Comments