Question

我的表包含少量colomns和1000行。当我打印页面时，它会打破页面中的行并显示在其他页面上。我希望它能显示完整的记录。

这是一个示例代码。我已经插入了一行，但是如果我们放了1000行，那么就会产生问题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
@media screen
{
.divTable
{
    border:1px solid;
    display:  table;
    width:98%;
    border-spacing:0px;/*cellspacing:poor IE support for  this*/
    /* border-collapse:separate;*/
}
.divRow
{
   display:table-row;
   width:auto;
}
.divCell
{
    margin-left:0px;
    margin-right:0px;
    margin-bottom:0px;
    margin-top:0px;
    float:left;/*fix for  buggy browsers*/
    display:table-column;
}
}
@media print
{
  @page
  {
   size: 8.5in 11.5in;
   size: potraite;
  }
  .divTable
  {
    page-break-after:auto;  
    border:1px solid;
    display:  table;
    width:99%;
    border-spacing:0px;/*cellspacing:poor IE support for  this*/
    /* border-collapse:separate;*/
  }
  .divRow
  {
    display:table-row;
    width:auto;
  }
  .divCell
  {
    margin-left:0px;
    margin-right:0px;
    margin-bottom:0px;
    margin-top:0px;
    float:left;
    display:table-column;
  }
}
</style>
</head>

<body style="margin:0 0 0 0">
<div class="divTable">
 <div class="headRow">
  <div class="divCell" style="width:10%">
    SNo
  </div>
  <div class="divCell" style="width:10%">
    RNo
  </div>
  <div class="divCell" style="width:10%">
    Full Name
  </div>
  <div class="divCell" style="width:10%">
    Father Name
  </div>
  <div class="divCell" style="width:20%">
    Address
  </div>
  <div class="divCell" style="width:10%">
    Class
  </div>
  <div class="divCell" style="width:10%">
    Section
  </div>
  <div class="divCell" style="width:10%">
    Teacher Name
  </div>
  <div class="divCell" style="width:10%">
   Attendence%
  </div>
 </div>
</div>

<div class="divTable">
 <div class="headRow">
  <div class="divCell" style="width:10%">
   1
  </div>
  <div class="divCell" style="width:10%">
    RNo2013-0001
  </div>
  <div class="divCell" style="width:10%">
    Abc
  </div>
  <div class="divCell" style="width:10%">
    Xyz
  </div>
  <div class="divCell" style="width:20%">
    Address
  </div>
  <div class="divCell" style="width:10%">
    Class
  </div>
  <div class="divCell" style="width:10%">
    Section
  </div>
  <div class="divCell" style="width:10%">
    Teacher Name
  </div>
  <div class="divCell" style="width:10%">
   90%
  </div>
 </div>
</div>

</body>
</html>

请告诉我如何使用css管理它的解决方案。我只能用css

Answer 1

在一页上只有这么多空间似乎是合乎逻辑的你可以尝试这个，至少，如果你想隐藏未使用的细胞： empty-cells:hide;

  .divTable
  {
    page-break-after:auto;  
    border:1px solid;
    display:  table;
    width:99%;
    border-spacing:0px;/*cellspacing:poor IE support for  this*/
    empty-cells:hide;
  }

另外，为什么使用div而不是默认的HTML 5表格布局？

如何从打印视图的CSS控制Div

1 个答案: