Gnezdena tabela

2 naročnika

Potreboval bi pomoč pri preoblikovanju tabele. Imam tabelo, ki se lomi čez več strani, kar sem rešil s thead in tbody elementi. Ker pa je znotraj tabele še nested table, ki sem ga ločil od header-ja tabele, imam problem z uskladitvijo širin stolpcev table header-ja (fiksni stolpci) in table body-ja (dinamični).
V body se podatki polnijo dinamično in ko se tabela lomi čez dve strani, se na naslednji strani header in body prekrivata, kar je problem.

Vprašanji sta torej dve:
- kako uskladiti stolpce header-ja in body-ja?
- kako urediti kodo, da se na novi strani header in body ne prekrivata?

Spodaj je še koda:

<table class="10cols">
<thead>
<tr class="firstrow">
<td colspan="8"></td>
<td>Text text</td>
<td>Text text</td>
</tr>
<tr class="secondrow">
<td> </td>
<td>Text</td>
<td>Text</td>
<td> </td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td> </td>
<td> </td>
</tr>
</thead>
<tbody>
<tr class="datarow">
<td colspan="8">
<table>

                    @foreach (var variable1 in ABCWeb.TemplateHelper.MultiselectGetValues((string)ViewData["variable2"], "variable1"))
                    {
                        <tr>
                            <td class="width5">Text</td>
                            <td>@CheckNode(variable1, "variable1_variable3")</td>
                            <td class="width10">Text</td>
                            <td class="width5 textCenter">Text</td>
                            <td>@CheckNode(variable1, "variable1_varibale4")</td>
                            <td class="width10">Text</td>
                            <td class="width10">@CheckNode(variable1, "variable1_0")</td>
                            <td class="width20">@CheckNode(variable1, "variable1_variable5")</td>
                        </tr>
                    }
                </table>
            </td>

            @{
                var elemCount = ABCWeb.TemplateHelper.MultiselectGetValues((string)ViewData["variable2"], "variable1").Count;
            }
            <td rowspan="@elemCount" class="textCenter width15">@(ViewData["variable6"])</td>
            <td rowspan="@elemCount" class="textCenter width15">@(ViewData["variable7"])</td>
        </tr>
            </tbody>
    </table>

Nevermind. Mi je uspelo tabelo prestrukturirati tako, da so prelomi delali pravilno, pa tudi stolpci so poravnani.

Buyaka!

mistique:
Nevermind. Mi je uspelo tabelo prestrukturirati tako, da so prelomi delali pravilno, pa tudi stolpci so poravnani.

Buyaka!

Fajn je, da napišeš rešitev, če bo slučajno nekdo drug iskal podobno stvar ...

Se strinjam, vendar, ker sem mislil, da gre za precej specifičen primer, nisem pisal podrobnosti.
Naredil pa sem redesign tabele. Na kratko (jutri prilepim kodo):

• header sem spravil v eno vrstico
• odstranil sem nested tabelo
• odstranil rowspan (vsebina je sedaj v vsaki vrstici)

Evo, tabela je sedaj takšna:

<table class="10cols">
<thead>
<tr class="firstrow">
<td class="textBold"> </td>
<td class="textBold">Text</td>

<td class="textBold">Text</td>
<td class="textBold"> </td>
<td class="textBold">Text</td>
<td class="textBold">Text</td>
<td class="textBold">Text</td>
<td class="textBold">Texttd>
<td class="textBold">Text</td>
<td class="textBold">Text</td>

</tr>
</thead>
<tbody>
<tr>

                    @foreach (var getdate() in ABCWeb.Common.TemplateHelper.MultiselectGetValues((string)ViewData["variable2"], "variable1"))
                    {
                        <tr>
                            <td class="width5">Text</td>
                            <td>@CheckNode(variable1, "variable1_variable3")</td>
                            <td class="width10">Text</td>
                            <td class="width5 textCenter">Text</td>
                            <td>@CheckNode(variable1, "variable1_variable4")</td>
                            <td class="width10">Text</td>
                            <td class="width10">@CheckNode(variable1, "variable1_0")</td>
                            <td class="width20">@CheckNode(variable1, "variable1_variable5")</td>
                            @{
                var elemCount = BPMWeb.TemplateHelper.MultiselectGetValues((string)ViewData["variable2"], "variable1").Count;
            }
            <td class="textCenter width15">@(ViewData["variable6"])</td>
            <td class="textCenter width15">@(ViewData["variable7"])</td>
                        </tr>
                    }   
        </tr>
    </tbody>
    </table>