1

いつもお世話になっております。
とある開発で、IE8対応を行う必要が出てきたのですが、
どうにもうまく行かないためこちらに質問させていただきます。

テーブルの幅を固定してtd内に記載している文字列が幅以上になれば

text-overflow: ellipsis;

を使い hogehoge... といったように表示させたいのですが、現状Tableの幅が広がり
全ての文字列が表示されてしまっている状態です。(Chrome/Firefoxでは表示はうまく行っているので、IE特有?の問題でしょうか?)

どなたか解決策を教えていただけないでしょうか?

下記、現在作成しているテーブルのHTMLおよびCSSになります。

<!-- html -->
<table style="width: 200px">
  <tbody>
    <tr>
      <td class="hoge" style="width: 180px;">
        <a style="width: 180px" href="#")>長い文字列はここに表示されます。</a>
      </td>
      <td class="right_icon" style="width: 20px">
        <a class="mini_icon icon_web_font" tabIndex=-1 href="#">+</a>
      </td>
    </tr>
  </tbody>
</table>
/** CSS **/
.hoge {
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  white-space: nowrap;
}

お手数ですが、上記よろしくお願いいたします。

4
  • td.hogeをdisplay: inline-blockにしている理由は何でしょうか?
    – SabaMotto
    2017年8月17日 4:32
  • コメントありがとうございます。前の編集の名残で今は理由はなくなってしまいました。 要件が満たせればここは変更しても大丈夫な箇所になります
    – Tone0929
    2017年8月17日 4:41
  • 今試せないので提案程度に留めますが、display: table-cellか項目ごと削除してみるとどうなるでしょうか。また、Aタグの末尾にある閉じカッコは関係ないでしょうか。
    – SabaMotto
    2017年8月17日 4:48
  • ありがとうございます。先ほど確認してみましたが、display:table-cellおよびdisplay項目の削除を行っても結果はかわらずでした... またAタグの閉じ括弧は関係なかったです(閉じ括弧は削除しました)
    – Tone0929
    2017年8月17日 4:59

1 件の回答 1

1

aはinlineです。したがってwidthを指定することはできません。https://www.w3schools.com/html/html_blocks.asp

IEで確認できないので、下記を試してみてください。
hogeを当てる場所を間違えている気がします。

<table style="width: 200px">
  <tbody>
    <tr>
      <td style="width: 180px;">
        <a class="hoge" href="#">長い文字列はここに表示されます。</a>
      </td>
      <td class="right_icon" style="width: 20px">
        <a class="mini_icon icon_web_font" tabIndex=-1 href="#">+</a>
      </td>
    </tr>
  </tbody>
</table>

CSS

/** CSS **/
.hoge {
    margin-top: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    white-space: nowrap;
    /** 追加 **/
    width: 180px ;
    height: 16px ;
    line-height: 16px ;
}
1
  • 解決しました!ありがとうございます!
    – Tone0929
    2017年9月8日 2:41

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。