как ограничить высоту строки таблицы 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>

Обновить

Пробовал это, но он выводит undefined:

<!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, сгенерированных динамически во время выполнения. Как добавить 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
Спасибо. Я пробовал это, но высота строки не меняется. alert(text) внутри каждого() вызова возвращает [object HTMLTableCellElement] . Элемент Chrome inspect показывает элементы td без какого-либо класса. Как исправить? - person Andrus; 13.01.2014
comment
Плохо, вместо .text следует использовать .wrapInner, см. обновленный ответ. - 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