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ä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>
更新
试过这个，但它输出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>
答案 0 :(得分：3)
如果您使用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;
}
如果您需要帮助来创建自定义列，可以查看此答案以获取更多信息：
how do I create a custom WebGrid Column
<强>更新
如果你想保持列的自动生成，你也可以使用JQuery在javascript中完成它，所以要包装所有的td元素：
$("tr td").each( function() {
$(this).wrapInner("<div class='td-max-height'></div>");
});
JS Fiddler链接：http://jsfiddle.net/7GHf4/
答案 1 :(得分：0)
CSS 2.1规则不允许您在表格单元格或行上设置最大高度。要获得所需内容，需要在div中添加内容并在该div上设置maximum-height和overflow CSS propeties。这是您修改过的示例（我在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ä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ä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>
<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ä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ä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>
答案 2 :(得分：0)
虽然这可能不是最佳选择，但我认为您可以通过将大文本放入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以满足您的需求。
希望帮助:)