ie7,8でのtdタグ(inline-block)

質問

下記のhtmlで表示されるのは 縦4×横4のテーブルになります。
<table>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>5</td><td>6</td><td>7</td><td>8</td></tr>
<tr><td>9</td><td>10</td><td>11</td><td>12</td></tr>
<tr><td>13</td><td>14</td><td>15</td><td>16</td></tr>
</table>
このhtmlを変えずに縦16×横1に変更するcssを作成しています。

今の所cssは
<style>
table td{
width:50px;
display: -moz-inline-stack;
　 display: inline-block;
　 zoom: 1;
　 *display: inline;
}
</style>

この様に記載しています。
この場合だとchromeとfirefoxでは「縦16×横1」で表示されます。
ただIE7,8だと「縦4×横4」で表示されてしまいます。

どなたかIE7,8に対応できるcssが分かる方いませんでしょうか？
よろしくお願いします。

回答No.1

ORUKA1951 · ベストアンサー

tableの数行に渡るデータを一列に並べるということは、tableの本来の使途からありえないはずです。
マークアップ自体が誤っているのではないかと・・

それはさておき、
<table summary="test">
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>5</td><td>6</td><td>7</td><td>8</td></tr>
<tr><td>9</td><td>10</td><td>11</td><td>12</td></tr>
<tr><td>13</td><td>14</td><td>15</td><td>16</td></tr>
</table>

に対して

table[summary="test"]{display:block;width:868px;}
table[summary="test"] tr{display:inline;}
table[summary="test"] tr td{display:block;float:left;width:50px;border:solid 1px gray;}

★dispaly:inline-blockでも並ぶが、white-spaceの処理で半角が開きます。

お礼

ORUKA1951様

ありがとうございます！
期待通りの表示にすることができました。

makeshopというオンラインショップを使っていましてそこから吐き出されるタグが全てtableの横4列で出てくる状態で縦に並べる方法が見つからなかったのです。。。

本当に助かりました～！