如何限制WebGrid中的html表格行高

【问题标题】：how to restrict html table row height in WebGrid如何限制WebGrid中的html表格行高
【发布时间】：2014-01-31 09:26:37
【问题描述】：

html table 一列包含很多文本，表格看起来很丑，行之间的空间太大。 如何让表格更好，让空间不那么大，长列应该更宽，可能有些内容不可见？

我尝试使用 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


    【解决方案1】：

    如果你使用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

    更新：

    如果你想保持列的自动生成，你也可以在 javascript 中使用 JQuery 来完成，所以要包装所有 td 元素：

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

    JS Fiddler 链接：http://jsfiddle.net/7GHf4/

    【讨论】：

    • 列数和列类型在设计时未知。数据由 ado .net datareader 从运行时动态生成的 sql select 语句创建。如果在设计时不知道列，如何添加 div？
    • 您可以使用 JQuery 选择器来编辑特定列并在其中添加 div，更新答案。
    • 谢谢。好点子。列号在设计时未知。如何将这个 class='td-max-height' 添加到 WebGrid 中的所有 td 元素？
    • 很简单，把.text替换成.each，这样会迭代所有的tds。更新了上面的答案。您甚至可以在每个函数内计算文本中的字符，并根据文本的长度添加或不添加 div。
    • 是的，但我认为您错过了我的编辑之一，您需要使用：$(this).wrapInner("
      " );而不是我发布的旧版本。您可以在上面答案的末尾看到带有工作 javascript 的提琴手（我添加了黄色背景以查看高度）。
    【解决方案2】：

    CSS 2.1 规则不允许您在表格单元格或行上设置最大高度。要获得所需的内容，您需要在 div 中添加内容并在该 div 上设置最大高度和溢出 CSS 属性。这是您修改后的示例（我包含在一个 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>

    【讨论】：

    • 谢谢。表是使用 MVC4 WebGid 从动态数据生成的。如何强制 WebGrid 生成这个 div ？我更新了问题。
    • 不幸的是，要将 WebGrid 配置为对特定列使用不同的格式，您必须在 @gd.GetHtml() 方法调用中设置“columns”元素。在 Web 上搜索如何在 WebGrid 中定义列以及如何在 WebGrid 中设置列​​的格式。问题是您可能必须为每个列定义一个带有一些默认实现的列元素，因此由于您有很多列，因此需要编写更多代码。
    • 列数和列类型在运行时未知，它们由 ado datareader 从运行时创建的 sql 中返回。如何强制 WebGrid 用 div 为每一列包装内容？
    【解决方案3】：

    虽然这可能不是最佳选择，但我认为您可以通过将大文本放入 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 以满足您的需要。

    希望对:)有帮助

    【讨论】：

    • 谢谢。由 MVC4 WebGrid 生成的表格。如何强制 webgrid 生成这个 div？我更新了问题。
    • 我是PHP人，对不起:(
    猜你喜欢
    • 2017-06-07
    • 1970-01-01
    • 2015-10-27
    • 2022-01-17
    • 1970-01-01
    • 2016-04-26
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode