2

这是我的表格：（在底部删除并添加了呈现的 HTML。）

<table style="width: 100%; white-space: nowrap; overflow: hidden;">
    <tbody><tr>
        <th>
            Department
        </th>
        <th>
            Function
        </th>
        <th>
            Process
        </th>
        <th style="max-width: 75px;">
            Procedure
        </th>
        <th>
        </th>
    </tr>
        <tr>
            <td>Legal Process</td>
            <td>Setup and Maintenance</td>
            <td>New placement scrub</td>
            <td>Review of newly placed accounts to determine if there is missing information or incorrect information before collection efforts are begun</td>

            <td align="center"><a href="/MasterList/Details/1">Details</a></td>
        </tr>
        <tr>
            <td>Legal Process</td>
            <td>Setup and Maintenance</td>
            <td>685 Queue/ Midland chargeoff balance issue</td>
            <td>Review and correction of Midland accounts that where placed with differing charge off and current principal balances</td>

            <td align="center"><a href="/MasterList/Details/2">Details</a></td>
        </tr>
        <tr>
            <td>Legal Process</td>
            <td>Lawsuit and Judgment Process</td>
            <td>Skip Trace</td>
            <td>Re-Serve Request CA</td>

            <td align="center"><a href="/MasterList/Details/3">Details</a></td>
        </tr>
        <tr>
            <td>Legal Process</td>
            <td>Lawsuit and Judgment Process</td>
            <td>Skip Trace</td>
            <td>Re-serve Request ID</td>

            <td align="center"><a href="/MasterList/Details/4">Details</a></td>
        </tr>
        <tr>
            <td>Legal Process</td>
            <td>Lawsuit and Judgment Process</td>
            <td>Suit Referral</td>
            <td>Barclays Suit Referral</td>

            <td align="center"><a href="/MasterList/Details/5">Details</a></td>
        </tr>
        <tr>
            <td>Legal Process</td>
            <td>Lawsuit and Judgment Process</td>
            <td>Suit Referral</td>
            <td>Capital One CRS Procedure</td>

            <td align="center"><a href="/MasterList/Details/6">Details</a></td>
        </tr>
        <tr>
            <td>Litigation Support</td>
            <td>Admin Mailroom &amp; Doc Production</td>
            <td>Oregon ten day demand letter</td>
            <td>Ten day demand letter is sent to the debtor</td>

            <td align="center"><a href="/MasterList/Details/7">Details</a></td>
        </tr>
        <tr>
            <td>Litigation Support</td>
            <td>Admin Mailroom &amp; Doc Production</td>
            <td>Oregon debtor exam</td>
            <td>Debtor exam  forwarded to court for issuing</td>

            <td align="center"><a href="/MasterList/Details/8">Details</a></td>
        </tr>
        <tr>
            <td>Litigation Support</td>
            <td>Admin Mailroom &amp; Doc Production</td>
            <td>Oregon debtor exam</td>
            <td>Debtor exam returned from court and forwarded to the Process Server for service</td>

            <td align="center"><a href="/MasterList/Details/9">Details</a></td>
        </tr>
        <tr>
            <td>Litigation Support</td>
            <td>Lawsuit and Judgment Process</td>
            <td>Oregon subpoena </td>
            <td>Subpoena forwarded to the Process Server for service</td>

            <td align="center"><a href="/MasterList/Details/10">Details</a></td>
        </tr>
        <tr>
            <td>Finance</td>
            <td>H/R - Payroll</td>
            <td>Benefits</td>
            <td>Benefits Signup</td>

            <td align="center"><a href="/MasterList/Details/11">Details</a></td>
        </tr>
        <tr>
            <td>Finance</td>
            <td>H/R - Payroll</td>
            <td>Benefits</td>
            <td>Benefits Summary</td>

            <td align="center"><a href="/MasterList/Details/12">Details</a></td>
        </tr>
        <tr>
            <td>Finance</td>
            <td>H/R - Payroll</td>
            <td>New Hire</td>
            <td>Background Check</td>

            <td align="center"><a href="/MasterList/Details/13">Details</a></td>
        </tr>
        <tr>
            <td>Finance</td>
            <td>H/R - Payroll</td>
            <td>New Hire</td>
            <td>ISI Orientation - Drug Test</td>

            <td align="center"><a href="/MasterList/Details/14">Details</a></td>
        </tr>
        <tr>
            <td>Finance</td>
            <td>Processing</td>
            <td>Client Remittances</td>
            <td>Asset Acceptance Remit</td>

            <td align="center"><a href="/MasterList/Details/15">Details</a></td>
        </tr>
        <tr>
            <td>Finance</td>
            <td>Processing</td>
            <td>Client Remittances</td>
            <td>End of Month Remits</td>

            <td align="center"><a href="/MasterList/Details/16">Details</a></td>
        </tr>
        <tr>
            <td>Finance</td>
            <td>Processing</td>
            <td>Cost Audits</td>
            <td>Internal Cost Audits</td>

            <td align="center"><a href="/MasterList/Details/17">Details</a></td>
        </tr>
        <tr>
            <td>Finance</td>
            <td>Processing</td>
            <td>Cost Audits</td>
            <td>Weekly Cost Duplicates</td>

            <td align="center"><a href="/MasterList/Details/18">Details</a></td>
        </tr>
</tbody></table>

目前它没有包装文本，所以表格看起来很干净。但是，我有一些非常长的过程名称，因此该表被推离页面。

我想要发生的是：如果名称长于单元格的宽度，它将隐藏文本。

我真的只希望程序有宽度限制。

在此处输入图像描述

除了 asp.net MVC4 入门模板中包含的内容之外，我没有向该项目添加任何其他 CSS。

4

3 回答 3

6

如果您可以向每个“程序”列（以及标题）添加一个类，如下所示：

 <tr>
   <td>Litigation Support</td>
   <td>Admin Mailroom &amp; Doc Production</td>
   <td>Oregon debtor exam</td>
   <td class="proc">Debtor exam  forwarded to court for issuing</td>

   <td align="center"><a href="/MasterList/Details/8">Details</a></td>
 </tr>

你可以像这样控制文本：

.proc {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}


.proc {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}
<table style="width: 100%; white-space: nowrap; overflow: hidden;">
  <tbody>
    <tr>
      <th>
        Department
      </th>
      <th>
        Function
      </th>
      <th>
        Process
      </th>
      <th class="proc">
        Procedure
      </th>
      <th>
      </th>
    </tr>
    <tr>
      <td>Legal Process</td>
      <td>Setup and Maintenance</td>
      <td>New placement scrub</td>
      <td class="proc">Review of newly placed accounts to determine if there is missing information or incorrect information before collection efforts are begun</td>

      <td align="center"><a href="/MasterList/Details/1">Details</a></td>
    </tr>
    <tr>
      <td>Legal Process</td>
      <td>Setup and Maintenance</td>
      <td>685 Queue/ Midland chargeoff balance issue</td>
      <td class="proc">Review and correction of Midland accounts that where placed with differing charge off and current principal balances</td>

      <td align="center"><a href="/MasterList/Details/2">Details</a></td>
    </tr>
    <tr>
      <td>Legal Process</td>
      <td>Lawsuit and Judgment Process</td>
      <td>Skip Trace</td>
      <td class="proc">Re-Serve Request CA</td>

      <td align="center"><a href="/MasterList/Details/3">Details</a></td>
    </tr>
    <tr>
      <td>Legal Process</td>
      <td>Lawsuit and Judgment Process</td>
      <td>Skip Trace</td>
      <td class="proc">Re-serve Request ID</td>

      <td align="center"><a href="/MasterList/Details/4">Details</a></td>
    </tr>
    <tr>
      <td>Legal Process</td>
      <td>Lawsuit and Judgment Process</td>
      <td>Suit Referral</td>
      <td class="proc">Barclays Suit Referral</td>

      <td align="center"><a href="/MasterList/Details/5">Details</a></td>
    </tr>
    <tr>
      <td>Legal Process</td>
      <td>Lawsuit and Judgment Process</td>
      <td>Suit Referral</td>
      <td class="proc">Capital One CRS Procedure</td>

      <td align="center"><a href="/MasterList/Details/6">Details</a></td>
    </tr>

  </tbody>
</table>

于 2013-05-08T17:44:10.513 回答
1

部分问题在于 display:table 本质上是灵活的——也就是说，表格内容的大小决定了表格的大小。如果您想确保您的表格与您定义的大小完全相同，您需要将其设置{table-layout:fixed}为表格的 CSS 规则的一部分。这带来了额外的要求，即为 n 个表列中的至少 n-1 列指定宽度，否则表将自动为每列分配相等的空间。我建议将每列宽度设置为除最后一列之外的百分比，这将自动占用未分配给其他列的剩余空间。然后使用 Paul Roub 的解决方案，将不适合列宽的剩余内容剪掉。这text-overflow:ellipsis并非所有浏览器都支持该属性，但它是您在不使用 javascript 的情况下将获得的最佳效果。也就是说，如果您确实想使用 javascript，我强烈推荐“dotdotdot”库：http ://dotdotdot.frebsite.nl/

于 2013-05-08T17:51:27.327 回答
1

在这里工作的小提琴

//css

.thetable>tbody>tr>td+td+td+td {
    overflow:hidden;
    max-width:200px;
    white-space:nowrap;
}
于 2013-05-08T17:55:26.967 回答