web-dev-qa-db-ja.com

<td>幅を設定して、表示されているコンテンツを視覚的に切り捨てるにはどうすればよいですか？

テーブルの列幅を設定しようとしています。これは、子要素が視覚的に切り捨てられるポイントに到達するまで正常に機能します...その後、サイズはそれより小さくなりません。 （「視覚的に切り捨てられた」-収まらないものは次の列の後ろに隠れているように見えます）

これが私の問題を示すためのサンプルコードです：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script language="javascript" type="text/javascript">
    var intervalID = null;

    function btn_onClick()
    {
        // keep it simple, only click once
        var btn = document.getElementById("btn");
        btn.disabled = true;     
        // start shrinking
        intervalID = window.setInterval( "shrinkLeftCell();", 100);
    }

    function shrinkLeftCell()
    {
        // get elements
        var td1 = document.getElementById("td1");
        var td2 = document.getElementById("td2");

        // initialize for first pass
        if( "undefined" == typeof( td1.originalWidth))
        {
            td1.originalWidth = td1.offsetWidth;
            td1.currentShrinkCount = td1.offsetWidth;
        }

        // shrink and set width size
        td1.currentShrinkCount--;
        td1.width = td1.currentShrinkCount;  // does nothing if truncating!

        // set reporting values in right cell
        td2.innerHTML = "Desired Width : [" 
                    + td1.currentShrinkCount 
                    + "], Actual : [" 
                    + td1.offsetWidth + "]";

        // Stop shrinking
        if( 1 >= td1.currentShrinkCount)
            window.clearInterval(intervalID);
    }
</script>
</head>
<body>
    <table width="100%" border="1">
        <tr>
            <td id="td1">
                Extra_long_filler_text
            </td>
            <td id="td2">
                Desired Width : [----], Actual : [----]
            </td>
        </tr>
    </table>

    <button id="btn" onclick="btn_onClick();">Start</button>
</body>
</html>

幅を設定する方法を変えてみました。

td1.offsetWidth = td1.currentShrinkCount;

そして

td1.width = td1.currentShrinkCount + "px";

そして

td1.style.width = td1.currentShrinkCount + "px";

そして

td1.style.posWidth = td1.currentShrinkCount;

そして

td1.scrollWidth = td1.currentShrinkCount;

そして

td1.style.overflow = "hidden";
td1.width = td1.currentShrinkCount;

そして

td1.style.overflow = "scroll";
td1.width = td1.currentShrinkCount;

そして

td1.style.overflow = "auto";
td1.width = td1.currentShrinkCount;

おそらくDIVを使用できると思いますが、テーブルはバインドされたコントロールから生成されているため、使用したくありません。また、asp.netコントロールの書き換えにはあまり入りたくありません。

そうは言っても、最後の努力として、少なくとも各 'td1のコンテンツをDIVでラップすることができ、オーバーフローで問題が解決するだろうと思いましたが、

<td id="td1">
    Extra_long_filler_text
</td>

と

<td id="td1" style="overflow:hidden;">
    <div style="margin=0;padding:0;overflow:hidden;">
        Extra_long_filler_text
    </div>
</td>

動作しませんでした。

内容を視覚的に切り捨てるために幅を設定する方法を知っている人はいますか？

ところで-私のターゲットブラウザはIE7です。これは内部アプリであるため、他のブラウザは現在重要ではありません。

htmlcsshtml-tablecolumn-widthcolumn-sizing
20
John MacIntyre

table-layout: fixed;を<table>に追加しようとしましたが、IE7で機能しました。

固定テーブルレイアウトでは、水平レイアウトはテーブルの幅と列の幅にのみ依存し、セルの内容には依存しません。

チェックアウト ドキュメント 。

30
Paolo Bergantino

CSSソリューション

「切り捨て」はあなたが探している単語ではないかもしれません。オーバーフローした文字を非表示にすることもできます。その場合は、css-propertyの「オーバーフロー」を調べてください。これにより、コンテナの宣言された制限を超えて拡張されたコンテンツが非表示になります。

td div.masker {
  height:25px;
  width:100px;
  overflow:hidden;
}

<td>
  <div class="masker">
    This is a string of sample text that
    should be hidden when it reaches out of the bounds of the parent controller.
  </div>
</td>

Javascriptソリューション

本当にコンテナ内のテキストを切り捨てたい場合は、右側から1文字を削除し、親の幅をテストし、親の幅が宣言された幅と一致するまで、文字の削除と親の幅のテストを続ける必要があります。

while (parent.width > desiredWidth) {
  remove one char from right-side of child-text
}
4
Sampson
<td id="td1" style="overflow-x:hidden;">

する必要があります

<td id="td1" style="overflow:hidden;">

オーバーフロー-xはMicrosoftCSS属性であり、現在はCSS3の一部です。古いオーバーフロー属性を使用します。

編集：

Paoloが言及しているように、table-layout：fixed;も追加する必要があります。テーブルの幅を指定します。完全な例を次に示します。

<html>
<head>
<style>
    table
    {

        table-layout:fixed;
        width:100px;
        }
td
{
    overflow:hidden;
    width:50px;
    border-bottom: solid thin;
    border-top:solid thin;
    border-right:solid thin;
    border-left:solid thin;

}
</style>
</head>
<body>
<table>
<tr><td>Some_long_content</td><td>Short</td></tr>
</table>
</body>
</html>
2
Darryl Braaten

私の知る限り、テーブルセルは常にその内容に対応するために拡張されます。

Javascriptを使用して、特定の量を超えるコンテンツを含むテーブルセルのデータを動的に切り捨てることを検討しましたか？または、サーバー側でこれをより簡単に行うこともできます。

1
Robert Venables

JQueryまたはプレーンJavaScriptを使用して、セルのコンテンツをdivタグで囲み、代わりに固定幅とoverflow：hiddenを設定できます。美しくはありませんが、うまくいくでしょう。

ETA：

<td><div style="width:30px;overflow:hidden">Text goes here</div></td>

DIVは境界要素であるため、ここで幅を設定する必要があります。

0
Hank