how to restrict html table row height in WebGrid

StackOverflow https://stackoverflow.com/questions/21077645

Pergunta

html table one column contains lot of text and table looks ugly, there is too much space between rows. How to make table better so that there is not so much space, long column should be wider and maybe some of content not visible?

I tried to use max-height , but it is ignored. Table is generated automatically by ASP.NET MVC4 WebGrid from dynamic data. how to force WebGrid to render without large spaces between rows ?

view:

@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>

viewmodel:

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

result:

<!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>

Update

Tried this but it outputs 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>
Foi útil?

Solução

If you use WebGrid, you can specify custom column formatting:

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

With CSS class:

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

If you need help to create the custom column, you can check out this answer for more information:

how do I create a custom WebGrid Column

Update:

You can also do it in javascript with JQuery if you want to keep the automatic generation of columns, so to wrap all td elements:

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

JS Fiddler link: http://jsfiddle.net/7GHf4/

Outras dicas

CSS 2.1 rules do not allow you to set maximum height on a table cell or row. To obtain what you want, you need to add the content in a div and set maximum-height and overflow CSS propeties on that div. Here is your modified example (I enclosed in a div element that cell with big content):

<!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>

Although this may not be the best option, I think you can get it working by putting the large text inside a div before putting it in the table. For example, you could try something like: 

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

And then, in your CSS, you could do something like:

.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' */
     }

I put together a crude JSFIDDLE to give you a basic idea. You should modify the CSS to suit your needs.

Hope that helped :)

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top