как да ограничите височината на реда на html таблицата в WebGrid

html таблица една колона съдържа много текст и таблицата изглежда грозна, има твърде много място между редовете. Как да направя таблицата по-добра, така че да няма толкова много място, дългата колона трябва да е по-широка и може би част от съдържанието да не се вижда?

Опитах се да използвам max-height, но се игнорира. Таблицата се генерира автоматично от ASP.NET MVC4 WebGrid от динамични данни. как да принудя WebGrid да рендира без големи интервали между редовете?

изглед:

@inherits ViewBase<Eeva.Erp.ViewModels.ReportDataViewModel>
@using System.Web.Helpers

@{ Layout = null;
 var gd = new WebGrid(source: Model.Rows, canSort: false);
}

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
    tr {
     max-height :50px;

    }
  </style>
</head>
<body>
  @gd.GetHtml()
</body>
</html>

изгледен модел:

public class ReportDataViewModel : ViewModelBase
{
        public IEnumerable<dynamic> Rows { get; set; }
}

резултат:

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">

    tr {
     max-height :50px;

    }
  </style>
</head>
<body>
      <table>
    <thead>
        <tr>
            <th scope="col">
calculrow            </th>
            <th scope="col">
doktyyp            </th>
            <th scope="col">
dokumnr            </th>
            <th scope="col">
fifoexpens            </th>
            <th scope="col">
hind            </th>
            <th scope="col">
klass            </th>
            <th scope="col">
kogpak            </th>
            <th scope="col">
kogus            </th>
            <th scope="col">
koopia            </th>
            <th scope="col">
nimetus            </th>
            <th scope="col">
paritoluri            </th>
            <th scope="col">
prepayment            </th>
            <th scope="col">
toode            </th>
            <th scope="col">
vat            </th>
            <th scope="col">
dokarvekonto            </th>
            <th scope="col">
dokeimuuda            </th>
            <th scope="col">
dokkrdokumnr            </th>
            <th scope="col">
dokkuupaev            </th>
            <th scope="col">
dokraha            </th>
            <th scope="col">
doksaaja            </th>
            <th scope="col">
doktasudok            </th>
            <th scope="col">
doktasukuup            </th>
            <th scope="col">
doktekst1            </th>
            <th scope="col">
klientaadress            </th>
            <th scope="col">
klientnimi            </th>
            <th scope="col">
klientotsekorral            </th>
            <th scope="col">
klientpiirkond            </th>
            <th scope="col">
klientpostiindek            </th>
            <th scope="col">
klienttanav            </th>
            <th scope="col">
klientviitenr            </th>
            <th scope="col">
kreeditdoktasudok            </th>
            <th scope="col">
maksetintingimus            </th>
            <th scope="col">
myygikookmprotsent            </th>
            <th scope="col">
myygikoomaksuvaba            </th>
            <th scope="col">
saajanimi            </th>
            <th scope="col">
saajapiirkond            </th>
            <th scope="col">
saajapostiindek            </th>
            <th scope="col">
saajatanav            </th>
            <th scope="col">
toodekaubakood            </th>
            <th scope="col">
toodeklass            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>False</td>
            <td>G</td>
            <td>2045</td>
            <td>False</td>
            <td>362,28813</td>
            <td>T</td>
            <td>0,0000</td>
            <td>2,0000</td>
            <td>1</td>
            <td>Siduri- ja piduriheebel kinnitustega              </td>
            <td></td>
            <td>0</td>
            <td>32-30100            </td>
            <td>1775,61</td>
            <td>112       </td>
            <td>False</td>
            <td>0</td>
            <td>27.11.2013 0:00:00</td>
            <td>EUR</td>
            <td></td>
            <td>359                      </td>
            <td>7.12.2013 0:00:00</td>
            <td>Arve 988 26.01.2012
Arve  16.08.2012
Arve 290 16.08.2012
Muu sissetulnud 24
Muu sissetulnud 25 2
Kassa sissetulek 8 4
Tellimus 43 05.01.2012
Tellimus 46 24.12.2011
Arve 292 10.01.2013
V&#228;ljastus 17.05.2013
Arve 344 27.09.2013
Arve 344 27.09.2013
Arve 05.11.2013
Tellimus 47 09.08.2013
Arve 20.12.2013</td>
            <td></td>
            <td>Acura UAB                                                                       </td>
            <td>767       </td>
            <td>                              </td>
            <td>          </td>
            <td>Huan Uh 2                                                   </td>
            <td>23445456            </td>
            <td></td>
            <td>10 p&#228;eva, viivis 0.5% p&#228;evas                      </td>
            <td>20,00</td>
            <td>False</td>
            <td>Acura UAB                                                                       </td>
            <td>                              </td>
            <td>          </td>
            <td>Huan Uh 2                                                   </td>
            <td></td>
            <td>     </td>
        </tr>
        <tr>
            <td>False</td>
            <td>G</td>
            <td>2045</td>
            <td>False</td>
            <td>0,43700</td>
            <td>T</td>
            <td>0,0000</td>
            <td>0,0000</td>
            <td>1</td>
            <td>Balti v&#252;rtsikilud 270g                            </td>
            <td></td>
            <td>0</td>
            <td>0075                </td>
            <td>1775,61</td>
            <td>112       </td>
            <td>False</td>
            <td>0</td>
            <td>27.11.2013 0:00:00</td>
            <td>EUR</td>
            <td></td>
            <td>359                      </td>
            <td>7.12.2013 0:00:00</td>
            <td>Arve 988 26.01.2012
Arve  16.08.2012
Arve 290 16.08.2012
Muu sissetulnud 24
Muu sissetulnud 25 2
Kassa sissetulek 8 4
Tellimus 43 05.01.2012
Tellimus 46 24.12.2011
Arve 292 10.01.2013
V&#228;ljastus 17.05.2013
Arve 344 27.09.2013
Arve 344 27.09.2013
Arve 05.11.2013
Tellimus 47 09.08.2013
Arve 20.12.2013</td>
            <td></td>
            <td>Acura UAB                                                                       </td>
            <td>767       </td>
            <td>                              </td>
            <td>          </td>
            <td>Huan Uh 2                                                   </td>
            <td>23445456            </td>
            <td></td>
            <td>10 p&#228;eva, viivis 0.5% p&#228;evas                      </td>
            <td>20,00</td>
            <td>False</td>
            <td>Acura UAB                                                                       </td>
            <td>                              </td>
            <td>          </td>
            <td>Huan Uh 2                                                   </td>
            <td></td>
            <td>     </td>
        </tr>
    </tbody>
    </table>

</body>
</html>

Актуализация

Опитах това, но извежда недефинирано:

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
    .td-max-height {
      margin: 0px;
      height: 50px;
      max-height: 50px;
      width: 100%;
      overflow: auto;
    }
 </style>
  <script src="/Scripts/jquery/jquery-1.9.1.js"></script>
<script src="/Scripts/jquery-ui-1.9.2.custom.js"></script>
<script src="/Scripts/i18n/jquery.ui.datepicker-et.js"></script>
<script src="/Scripts/jquery.contextmenu-fixed2.js"></script>
script src="/Scripts/json2.js"></script>
<script src="/Scripts/jquery.form.js"></script>
 <script>
    $(function () {
      $("tr td").wrapInner(function (index, text) {
        return "<div class='td-max-height'>" + text + "</div>";
      });
    });
  </script>
</head>
<body>
      <table>
    <thead>
        <tr>
            <th scope="col">
calculrow            </th>
            <th scope="col">
doktyyp            </th>
            <th scope="col">
dokumnr            </th>
            <th scope="col">
fifoexpens            </th>
            <th scope="col">
hind            </th>
            <th scope="col">
klass            </th>
            <th scope="col">
kogpak            </th>
            <th scope="col">
kogus            </th>
            <th scope="col">
koopia            </th>
            <th scope="col">
nimetus            </th>
            <th scope="col">
paritoluri            </th>
            <th scope="col">
prepayment            </th>
            <th scope="col">
toode            </th>
            <th scope="col">
vat            </th>
            <th scope="col">
dokarvekonto            </th>
            <th scope="col">
dokeimuuda            </th>
            <th scope="col">
dokkrdokumnr            </th>
            <th scope="col">
dokkuupaev            </th>
            <th scope="col">
dokraha            </th>
            <th scope="col">
doksaaja            </th>
            <th scope="col">
doktasudok            </th>
            <th scope="col">
doktasukuup            </th>
            <th scope="col">
doktekst1            </th>
            <th scope="col">
klientaadress            </th>
            <th scope="col">
klientnimi            </th>
            <th scope="col">
klientotsekorral            </th>
            <th scope="col">
klientpiirkond            </th>
            <th scope="col">
klientpostiindek            </th>
            <th scope="col">
klienttanav            </th>
            <th scope="col">
klientviitenr            </th>
            <th scope="col">
kreeditdoktasudok            </th>
            <th scope="col">
maksetintingimus            </th>
            <th scope="col">
myygikookmprotsent            </th>
            <th scope="col">
myygikoomaksuvaba            </th>
            <th scope="col">
saajanimi            </th>
            <th scope="col">
saajapiirkond            </th>
            <th scope="col">
saajapostiindek            </th>
            <th scope="col">
saajatanav            </th>
            <th scope="col">
toodekaubakood            </th>
            <th scope="col">
toodeklass            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>False</td>
            <td>G</td>
            <td>135534</td>
            <td>False</td>
            <td>197,91000</td>
            <td>T</td>
            <td>0,0000</td>
            <td>0,0000</td>
            <td>1</td>
            <td>ARLANDA               </td>
            <td></td>
            <td>0</td>
            <td></td>
            <td>0</td>
            <td></td>
            <td>False</td>
            <td>0</td>
            <td>19.01.2014 0:00:00</td>
            <td>SEK</td>
            <td></td>
            <td></td>
            <td></td>
            <td>test                       </td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>0</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
   </tbody>
    </table>
</body>
</html>

html css asp.net-mvc asp.net-mvc-4 webgrid
person Andrus    schedule 12.01.2014    source източник

Отговори (3)


arrow_upward
4
arrow_downward

Ако използвате WebGrid, можете да зададете персонализирано форматиране на колони:

gd.Column(
   columnName:"ColumnName", 
   format: (item) => 
   {
      return "<div class='td-max-height'>" + item.Context + "</div>";
   }),

С CSS клас:

.td-max-height {
     margin: 0px;
     height: 50px;
     max-height: 50px;
     width: 100%;
     overflow: auto;
 }

Ако имате нужда от помощ за създаване на персонализирана колона, можете да разгледате този отговор за повече информация:

как да създам персонализирана колона WebGrid

Актуализация:

Можете също да го направите в javascript с JQuery, ако искате да запазите автоматичното генериране на колони, така че да обгърнете всички td елементи:

$("tr td").each( function() { 
        $(this).wrapInner("<div class='td-max-height'></div>");
    });

Връзка към JS Fiddler: http://jsfiddle.net/7GHf4/

person Karhgath    schedule 12.01.2014
comment
Броят на колоните и типовете колони не са известни по време на проектиране. Данните се създават от ado .net datareader от sql select изрази, генерирани динамично по време на изпълнение. Как да добавите div, ако колоните не са известни по време на проектиране? - person Andrus; 12.01.2014
comment
Можете да го направите с JQuery селектор, за да редактирате конкретни колони и да добавите div вътре, отговорът е актуализиран. - person Karhgath; 13.01.2014
comment
Благодаря ти. великолепна идея. Номерът на колоната не е известен по време на проектиране. Как да добавите този class='td-max-height' към всички td елементи в WebGrid? - person Andrus; 13.01.2014
comment
Това е доста просто, заменете .text с .each, което ще повтори всички tds. Актуализира отговора по-горе. Можете дори да преброите знака в текст във всяка функция и да добавите div или не в зависимост от дължината на текста. - person Karhgath; 13.01.2014
comment
Благодаря ти. Опитах това, но височината на реда не се променя. предупреждение(текст) вътре при всяко() извикване връща [object HTMLTableCellElement]. Chrome inpect елемент показва td елементи без никакъв клас. Как да поправя? - person Andrus; 13.01.2014
comment
Лошото ми, .wrapInner трябва да се използва вместо .text, вижте актуализирания отговор. - person Karhgath; 13.01.2014
comment
Благодаря ти. Използването на wrapInner извежда undefined за булеви, целочислени и символни колони вместо съдържание на колони. Как да разреша реални данни от колони като без javascript? - person Andrus; 13.01.2014
comment
Моля, има ли някакво решение за това? - person Andrus; 19.01.2014
comment
Нека го тествам и ще се върна при вас. - person Karhgath; 19.01.2014
comment
Имате ли примерен html изход за вашия проблем с bool и всичко останало? Не мога да възпроизвеждам. - person Karhgath; 19.01.2014
comment
възпроизвеждахте ли проблема? - person Andrus; 21.01.2014
comment
Да, но мисля, че сте пропуснали една от моите редакции, трябва да използвате: $(this).wrapInner(‹div class='td-max-height'›‹/div›); а не старата, която пуснах. Можете да видите цигуларя с работещия javascript (добавих жълт фон, за да видя височината) в края на отговора по-горе. - person Karhgath; 21.01.2014
comment
Уважаеми Karhgath, трябва да съобщя, че първото ви решение не работи. Връща само целите div тагове като текст. Другото решение обаче ми спести много време. Благодаря много! - person GeorgiG; 25.10.2016

arrow_upward
0
arrow_downward

Правилата на CSS 2.1 не ви позволяват да зададете максимална височина на клетка или ред на таблица. За да получите това, което искате, трябва да добавите съдържанието в div и да зададете CSS свойства за максимална височина и препълване на този div. Ето вашия модифициран пример (затворих в div елемент тази клетка с голямо съдържание):

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">

      .withMaximumHeight {
      max-height :50px;
      overflow: hidden;

      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th scope="col">
            calculrow
          </th>
          <th scope="col">
            doktyyp
          </th>
          <th scope="col">
            dokumnr
          </th>
          <th scope="col">
            fifoexpens
          </th>
          <th scope="col">
            hind
          </th>
          <th scope="col">
            klass
          </th>
          <th scope="col">
            kogpak
          </th>
          <th scope="col">
            kogus
          </th>
          <th scope="col">
            koopia
          </th>
          <th scope="col">
            nimetus
          </th>
          <th scope="col">
            paritoluri
          </th>
          <th scope="col">
            prepayment
          </th>
          <th scope="col">
            toode
          </th>
          <th scope="col">
            vat
          </th>
          <th scope="col">
            dokarvekonto
          </th>
          <th scope="col">
            dokeimuuda
          </th>
          <th scope="col">
            dokkrdokumnr
          </th>
          <th scope="col">
            dokkuupaev
          </th>
          <th scope="col">
            dokraha
          </th>
          <th scope="col">
            doksaaja
          </th>
          <th scope="col">
            doktasudok
          </th>
          <th scope="col">
            doktasukuup
          </th>
          <th scope="col">
            doktekst1
          </th>
          <th scope="col">
            klientaadress
          </th>
          <th scope="col">
            klientnimi
          </th>
          <th scope="col">
            klientotsekorral
          </th>
          <th scope="col">
            klientpiirkond
          </th>
          <th scope="col">
            klientpostiindek
          </th>
          <th scope="col">
            klienttanav
          </th>
          <th scope="col">
            klientviitenr
          </th>
          <th scope="col">
            kreeditdoktasudok
          </th>
          <th scope="col">
            maksetintingimus
          </th>
          <th scope="col">
            myygikookmprotsent
          </th>
          <th scope="col">
            myygikoomaksuvaba
          </th>
          <th scope="col">
            saajanimi
          </th>
          <th scope="col">
            saajapiirkond
          </th>
          <th scope="col">
            saajapostiindek
          </th>
          <th scope="col">
            saajatanav
          </th>
          <th scope="col">
            toodekaubakood
          </th>
          <th scope="col">
            toodeklass
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>False</td>
          <td>G</td>
          <td>2045</td>
          <td>False</td>
          <td>362,28813</td>
          <td>T</td>
          <td>0,0000</td>
          <td>2,0000</td>
          <td>1</td>
          <td>Siduri- ja piduriheebel kinnitustega              </td>
          <td></td>
          <td>0</td>
          <td>32-30100            </td>
          <td>1775,61</td>
          <td>112       </td>
          <td>False</td>
          <td>0</td>
          <td>27.11.2013 0:00:00</td>
          <td>EUR</td>
          <td></td>
          <td>359                      </td>
          <td>7.12.2013 0:00:00</td>
          <td>
            <div class="withMaximumHeight">
              Arve 988 26.01.2012
              Arve  16.08.2012
              Arve 290 16.08.2012
              Muu sissetulnud 24
              Muu sissetulnud 25 2
              Kassa sissetulek 8 4
              Tellimus 43 05.01.2012
              Tellimus 46 24.12.2011
              Arve 292 10.01.2013
              V&#228;ljastus 17.05.2013
              Arve 344 27.09.2013
              Arve 344 27.09.2013
              Arve 05.11.2013
              Tellimus 47 09.08.2013
              Arve 20.12.2013
            </div>
          </td>
          <td></td>
          <td>Acura UAB                                                                       </td>
          <td>767       </td>
          <td>                              </td>
          <td>          </td>
          <td>Huan Uh 2                                                   </td>
          <td>23445456            </td>
          <td></td>
          <td>10 p&#228;eva, viivis 0.5% p&#228;evas                      </td>
          <td>20,00</td>
          <td>False</td>
          <td>Acura UAB                                                                       </td>
          <td>                              </td>
          <td>          </td>
          <td>Huan Uh 2                                                   </td>
          <td></td>
          <td>     </td>
        </tr>
        <tr>
          <td>False</td>
          <td>G</td>
          <td>2045</td>
          <td>False</td>
          <td>0,43700</td>
          <td>T</td>
          <td>0,0000</td>
          <td>0,0000</td>
          <td>1</td>
          <td>Balti v&#252;rtsikilud 270g                            </td>
          <td></td>
          <td>0</td>
          <td>0075                </td>
          <td>1775,61</td>
          <td>112       </td>
          <td>False</td>
          <td>0</td>
          <td>27.11.2013 0:00:00</td>
          <td>EUR</td>
          <td></td>
          <td>359                      </td>
          <td>7.12.2013 0:00:00</td>
          <td>
            <div class="withMaximumHeight">
              Arve 988 26.01.2012
              Arve  16.08.2012
              Arve 290 16.08.2012
              Muu sissetulnud 24
              Muu sissetulnud 25 2
              Kassa sissetulek 8 4
              Tellimus 43 05.01.2012
              Tellimus 46 24.12.2011
              Arve 292 10.01.2013
              V&#228;ljastus 17.05.2013
              Arve 344 27.09.2013
              Arve 344 27.09.2013
              Arve 05.11.2013
              Tellimus 47 09.08.2013
              Arve 20.12.2013
            </div>
          </td>
          <td></td>
          <td>Acura UAB                                                                       </td>
          <td>767       </td>
          <td>                              </td>
          <td>          </td>
          <td>Huan Uh 2                                                   </td>
          <td>23445456            </td>
          <td></td>
          <td>10 p&#228;eva, viivis 0.5% p&#228;evas                      </td>
          <td>20,00</td>
          <td>False</td>
          <td>Acura UAB                                                                       </td>
          <td>                              </td>
          <td>          </td>
          <td>Huan Uh 2                                                   </td>
          <td></td>
          <td>     </td>
        </tr>
      </tbody>
    </table>

  </body>
</html>
person Cosmin Vană    schedule 12.01.2014
comment
Благодаря ти. Таблицата се генерира с помощта на MVC4 WebGid от динамични данни. Как да принудя WebGrid да генерира този div? Актуализирах въпроса. - person Andrus; 12.01.2014
comment
За съжаление, за да конфигурирате WebGrid да има различен формат за конкретна колона, ще трябва да зададете елемента columns в извикването на метод @gd.GetHtml(). Потърсете в мрежата как да дефинирате колони в WebGrid и как да форматирате колона в WebGrid. Проблемът е, че може да се наложи да дефинирате елемент на колона с някаква реализация по подразбиране за всяка от вашите колони, така че ще има повече код за писане, тъй като имате много колони. - person Cosmin Vană; 12.01.2014
comment
броят на колоните и типовете колони не са известни по време на изпълнение, те се връщат от ado datareader от създадения по време на изпълнение sql. Как да принудя WebGrid да обвива съдържанието с div за всяка колона? - person Andrus; 12.01.2014

arrow_upward
0
arrow_downward

Въпреки че това може да не е най-добрият вариант, мисля, че можете да го накарате да работи, като поставите големия текст вътре в div, преди да го поставите в таблицата. Например, можете да опитате нещо като:

<td>
<div class="foo"> A very large amount of text here </div>
</td>

И тогава във вашия CSS можете да направите нещо като:

.foo {
     margin: 0px;
     height: 60px;
     width: 100%;
     min-width: 200px;
     overflow: auto; /* This is if you want the scrollbars. If you want the text to be hidden instead, use 'hidden' */
     }

Събрах груб JSFIDDLE, за да ви дам основна идея. Трябва да промените CSS, за да отговаря на вашите нужди.

Надявам се, че помогна :)

person pradeepcep    schedule 12.01.2014
comment
Благодаря ти. Таблица, генерирана от MVC4 WebGrid. Как да принудя webgrid да генерира този div? Актуализирах въпроса. - person Andrus; 12.01.2014
comment
Аз съм PHP човек, съжалявам :( - person pradeepcep; 12.01.2014