Bryuk Bryuk - 1 year ago 60
CSS Question

How to create table with different number of cells in the rows?

My idea in general: I have HTML Table with custom rows inside. This is similar example:
enter image description here

2nd cell in 1st row - Shold be about 40% of row and 6th cell of 1st row should be a double

8th cell of 2nd row should be big ~ 40%

Basically this 2 rows repeats in my table. Each 2nd row collapsible and it collapse on click in first cell of 1st row. The problem is when I collapse and back my table changes the size of columns and my screen jumps all the time. I want this rows to be always the same structure, but since I have response design I don't want to set exact width for each cell.

I've tried a dozen of variant with colspan and % of width, but nothing work for me.
this is my latest result:

<tr class="mattersRow">

<td colspan="4">
<a href="#collapse63" data-toggle="collapse"></a>
<td class="editableCell qbmatter" colspan="14"></td>
<td class="editableCell workDate" colspan="4"></td>
<td class="editableCell hours" colspan="2"></td>
<td class="editableCell person" colspan="6"></td>
<td class="rate" colspan="2"></td>
<td class="editableCell amount" colspan="4"></td>
<td align="center"></td>

<tr id="collapse63" class="helpRow in" style="height: auto;">

<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="4"></td>
<td colspan="2"></td>
<td colspan="4"></td>
<td colspan="2"></td>
<td colspan="16"></td>
<td colspan="4"></td>


Can you help me to build this rows properly...

Answer Source

You're on the right track, but tables are designed to have rows and columns end at the same spots, so that little bit of extra space to the right of the 2nd cell in the first row, is either something that will be a ton of work to replicate, or will just be much easier to have them line up. Otherwise you'll start getting into nested tables and it will be more work than it's worth. You could always use a table building generator like TableGenerator

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download