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ä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äeva, viivis 0.5% pä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ü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ä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äeva, viivis 0.5% pä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>
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/