web-dev-qa-db-ja.com

IEの<td>で「display：block」を機能させるにはどうすればよいですか？

IEテーブルセルを実際のブロックとして表示するためにできることはありますか？

このスタイルの場合：

table,tbody,tr,td,div {
  display: block;
  border: 1px solid #0f0;
  padding: 4px;
}

そして、このHTML：

<table>
  <tbody>
    <tr>
      <td>R1C1</td>
      <td>R1C2</td>
      <td>R1C3</td>
    </tr>
  </tbody>
</table>

<div>
  <div>
    <div>
      <div>R1C1</div>
      <div>R1C2</div>
      <div>R1C3</div>
    </div>
  </div>
</div>

この表は、FirefoxとSafari/Chromeの両方でネストされたdivとまったく同じように表示されます。しかし、Internet Explorer（8）では、プロパティdisplay: blockは効果がありません。テーブルは、そのプロパティを設定していないかのようにレンダリングされます。

私の主な問題は、細胞が壊れないことです。それらはすべて1行でレンダリングされます。 （tbodyおよびtr要素には境界線もパディングもありません。今のところ、これは問題ではありません。）

検索時に問題に関する情報が見つかりませんでした。互換性チャート quirksmode および他の場所では、IEはdisplay: block v。5.5以降。テーブル表示の問題に関する議論は、逆を行うときであるようです-テーブル以外の要素にdisplay: table-* プロパティ。

だからもう一度、IEテーブルセルをブロックとしてレンダリングするためにできることはありますか？

（実際のテーブルは、実際には表形式のデータを持つテーブルです。そのままにしておき、控えめにスタイルを変更したいと思います。）

htmlcssinternet-explorerinternet-explorer-8
37
Daniel

float: leftをstuffに適用しました。それはちょっと動作します。

Live Demo

最大の問題は、width: 100%をpaddingと組み合わせることで物事が広すぎます。

そう：
Live Demo（問題のないpaddingなし）

それは少し良く見えますが、必要な場合にどこにpaddingを簡単に追加できるかわかりません。

これは失敗します->miserably<-IE7では（それは<table>であるという事実を克服することはできません）、 IE7を気にしなくても、ユースケースに合わせて調整する必要があります（まったく使用可能な場合）。

IE7：

enter image description here

38
thirtydot

IE6 +の場合、以下がうまくいきました。

 
 tr {
表示：ブロック; 
位置：相対
} 
 
 td.col1 {
 display：block; 
 left：0; 
 top：0; 
 height：90px; 
} 
 
 td.col2 {
表示：ブロック; 
位置：絶対値; 
左：0; 
上：30px; 
} 
 
 td.col3 {
表示：ブロック; 
位置：絶対値; 
左：0; 
上：60px; 
}

仮定：

  • セルの高さ30px

欠点：

  • 固定セル高
  • 面倒なtopプロパティの指定（おそらく生成）
  • HTMLが列のクラスを提供する場合にのみ機能します

利点：

  • すべてのブラウザで動作します。

使用する場合：

  • HTMLを制御できないが、CSSを制御する場合。 IFRAMEで表示し、カスタムスタイルシートを提供するホスト型支払いソリューションがいくつかあります。
4
cmc

ちょうど私の同僚とそれを考え出した。

私は強くIE8をサポートしないことを強くお勧めしますAT ALL ANYMORE！現在サポートされていない、現在安全でない製品の使用を容易にしているため（および=テクニック）ユーザーにアップグレードするよう指示し、ブラウザのダウンロードリンクから選択できるようにする方が良いでしょう。

それは言われています。以下のCSSは、Internet Explorer 8で修正するために最低限必要なCSSです。

table {
   width: 100%;
 }
 td {
   float: left;
   width: 100%;
 }
<table>
  <tbody>
    <tr>
      <td>cell-1</td>
      <td>cell-2</td>
    </tr>
  </tbody>
</table>
3
Marc van Nieuwenhuijzen

このコードを追加してください：

<!DOCTYPE html>

私たちは、これが解決されたものであり、上に述べたように、display：blockが有効です。

このコードを上部に追加する必要があります。

<!DOCTYPE html>
<html>
<head>
    <style>
        td {
            display: block;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <td>First Name</td>
                <td>Last Name</td>
                <td>Job Title</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><div>James</div></td>
                <td><div>Matman</div></td>
                <td><div>Chief Sandwich Eater</div></td>
            </tr>
            <tr>
                <td><div>The</div></td>
                <td><div>Tick</div></td>
                <td><div>Crimefighter Sorta</div></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

このコード行を上部に追加しますが、「float」と「width」を使用するのが非常に良いです。すみません、私の英語はとても下手です。

0
Lucio Lu

成功する display:table-row; の代わりに display:block想定されるように動作します

0
Sumit Chauhan