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

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 に答える