使表行堆叠在具有固定高度的表的顶部（将未使用的空间留空，表行是动态的）

时间：2015-12-03 07:33:36

标签： html css html-table css-tables

Link to jsfiddle 

<table class="cr-table">
<thead class="cr-th">
    <tr>
        <th>Your Item #</th>
        <th>Product Description</th>
        <th>U of M</th>
        <th>Qty Ordered</th>
        <th>Qty Shipped</th>
        <th>Unit Price</th>
        <th>Amount</th>
    </tr>
</thead>
<tbody class="cr-tbody">
    <tr>
        <td colspan="7">
          <span>Pre-text</span>
        </td>
    </tr>
    <tr style="padding:0px;margin:0px">
      <td><span>Code</span></td>
      <td><span>Name</span></td>
      <td><span>UoS id</span></td>
      <td><span>Qty Ordered</span></td>
      <td><span>Qty Shipped</span></td>
      <td><span>Price</span></td>
      <td><span>Subtotal</span></td>
    </tr>
    <tr style="padding:0px;margin:0px">
      <td><span>Code</span></td>
      <td><span>Name</span></td>
      <td><span>UoS id</span></td>
      <td><span>Qty Ordered</span></td>
      <td><span>Qty Shipped</span></td>
      <td><span>Price</span></td>
      <td><span>Subtotal</span></td>
    </tr>
    <tr>
        <td colspan="7">
          <span>Post-text</span>
        </td>
    </tr>
</tbody>

的CSS：

    .cr-table {
width: 100% !important; height: 50%; font-size: 11px !important; border: 1px solid black !important;
padding:0px !important;margin: 0px !important;
}
.cr-tbody {border: 1px solid black !important; font-size: 11px; height: 50%; border-collapse: collapse;}
.cr-th {font-size: 13px;border: 1px solid black; color: white; background-color: #829BAE;}
.cr-title {font-size: 22px; text-align: right; margin-right: 5%; font-weight: bold }
.cr-cell-name {font-size: 11px;background-color: #829BAE; border: 1px solid black; color: white; text-align: center}
.cr-cell-content {font-size: 11px; border: 1px solid black; text-align:center;}
.cr-td-foot {border-top: 0px;border-bottom:0px;border-right: solid black 1px;font-size: 11px;padding:3px}
.cr-td-foot-ri {border-top: 0px;border-bottom:0px;font-size: 11px;padding:3px}
.cr-address {padding-left: 0px; font-size: 11px; padding-top: 7px; padding-bottom: 7px; text-align: left !important}
.cr-ref {border: 2px solid red;}
.cr-top {border: 0px}
.cr-empty {color: white}
table.fixed { border-collapse: collapse; page-break-inside: avoid; table-layout:fixed; border: 1px solid black; width: 100% }
table.fixed td { overflow: hidden; border-collapse: collapse; }

我已经添加了一个指向jsfiddle的链接，在那里我将我的代码删除了一个更简单的例子。基本上是＆＃34;代码名称为UoSid等的行。＆＃34;是发票行，可以有一个或多个。我需要桌子具有一定的尺寸，但行应始终从上到下紧凑堆叠。在jsfiddle中你可以看到它们占据整个表空间并均匀分布。在下面的杰作中，你可以看到我左边的东西和右边的东西。 On the left is what I have, on the right is what I need

1 个答案:

答案 0 :(得分：0)

似乎你缺少在桌子的主体中应用TD的样式。我想建议您选择解决问题：

如果您想要从上到下左对齐文本，请将其添加到css：

.cr-tbody td{border-left:2px solid rgba(255,255,255,0);}

如果您希望文本在每个td中居中，请将其添加到css：

.cr-tbody td{border-left:2px solid rgba(255,255,255,0);text-align:center;}

希望这可以帮助您解决问题。

相关问题
最新问题