как я могу заставить "display: block" работать на <td> в ie?

<p>могу ли я что-нибудь сделать, чтобы ie отображать ячейки таблицы как фактические блоки?</p><p>учитывая этот стиль:</p><pre><code>table,tbody,tr,td,div { display: block; border: 1px solid #0f0; padding: 4px; } </code></pre><p>и этот html:</p><pre><code><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> </code></pre><p>таблица отображается точно так же, как вложенные div в firefox и safari/chrome. но в internet explorer (8) свойство <code>display: block</code> не действует. таблица отображается точно так, как будто я не устанавливаю это свойство.</p><p>моя главная проблема в том, что клетки не ломаются; все они отображаются в одну строку. (элементы <code>tbody</code> и <code>tr</code> не имеют границ и отступов. хотя сейчас это не проблема для меня.)</p><p>я не нашел никакой информации о проблеме при поиске. в таблицах совместимости <a href="http://www.quirksmode.org/css/display.html">в режиме quirksmode</a> и в других местах говорится, что ie поддерживает <code>display: block</code> начиная с версии 5.5. любое обсуждение проблем с отображением таблиц, по-видимому, ведется в обратном порядке - предоставление элементам, не относящимся к таблице, любому из свойств <code>display: table-*</code>.</p><p>итак, еще раз, что я могу сделать, чтобы ie визуализировать ячейки таблицы как блок?</p><p>(настоящая таблица - это действительно таблица с табличными данными. я хотел бы сохранить ее в таком виде и изменить ее стиль ненавязчиво.)</p>

<p>я применил <code>float: left</code> к <em>материал</em>. это вроде работает.</p><p> <a href="http://jsfiddle.net/zywg9/"><strong><em>live demo</em></strong></a> </p><p>самая большая проблема в том, что <code>width: 100%</code> в сочетании с <code>padding</code> делает вещи слишком широкими.</p><p>так:<br> <a href="http://jsfiddle.net/zywg9/1/"><strong><em>live demo</em></strong> (без проблемной <code>padding</code>)</a> </p><p>это выглядит немного лучше, но я не уверен, как вы можете легко добавить <code>padding</code> везде, если вам это нужно.</p><hr><p>это терпит неудачу -> <strong>miserable</strong> <- в ie7 (он просто не преодолеет тот факт, что это <code><table></code>), и даже если вы не заботитесь о ie7, для его использования потребуется настройка (если это вообще можно использовать).</p><p><strong>ie7:</strong></p><p><img src="https://i.stack.imgur.com/mokfp.png" alt="enter image description here"></p>

<p>у меня работает ie6 +:</p><pre> tr { дисплей: блок; позиция: относительная } td.col1 { дисплей: блок; слева: 0; top: 0; высота: 90px; } td.col2 { дисплей: блок; позиция: абсолютная; слева: 0; top: 30px; } td.col3 { дисплей: блок; позиция: абсолютная; слева: 0; top: 60px; } </pre><p>предположения:</p><ul> <li>высота ячейки 30 пикселей</li> </ul><p>недостатки:</p><ul> <li>фиксированная высота ячейки</li> <li>громоздкая спецификация свойства <code>top</code> (возможно, сгенерировать)</li> <li>работает только когда html предоставляет классы для столбцов</li> </ul><p>преимущество:</p><ul> <li>работает во всех браузерах.</li> </ul><p>когда использовать:</p><ul> <li>когда у вас нет контроля над html, но есть контроль над css. некоторые хостинговые платежные решения приходят на ум, которые отображаются в iframe и предлагают пользовательские таблицы стилей.</li> </ul>

<p>просто понял это с моим коллегой.</p><p><strong> хотя, я настоятельно рекомендую не поддерживать ie8 at всех больше! </strong> поскольку вы облегчаете использование неподдерживаемого и в настоящее время небезопасного продукта, который не соответствует современным стандартам и методам. <em>было бы лучше рассказать пользователям о необходимости обновления и предоставить им ссылки на скачивание браузера.</em></p><p>что, как говорится. приведенный ниже css - это минимальный css, необходимый для исправления в internet explorer 8.</p><p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>table { width: 100%; } td { float: left; width: 100%; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><table> <tbody> <tr> <td>cell-1</td> <td>cell-2</td> </tr> </tbody> </table></code></pre> </div> </div> </p>

<p>добавить этот код:</p><p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code><!doctype html></code></pre> </div> </div> </p><p>我 这里 是 这么 解决 的, 加上 上面 那条 声明 语句, дисплей: блок 对 тд 就会 有效.</p><p>вам нужно добавить этот код в верхней части.</p><p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code><!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></code></pre> </div> </div> </p><p>добавьте эту строку кода вверху, но используйте «float» и «width», это очень хорошо…. извините, мой английский очень плохой.</p>

<p>сделайте это <code>display:table-row;</code> вместо <code>display:block</code> он будет работать как положено</p>