Кажется, что остановка ячейки в одной строке не позволяет установить ширину TD во всех других строках Зачем?

Я хочу создать таблицу, которая выглядит следующим образом:

+-----------------------------------------------------------+
|January 12th, 2012                                         |
+-----------------------------------------------------------+
| x | first item                 | second item              |
+-----------------------------------------------------------+
| x | first item                 | second item              |
+-----------------------------------------------------------+
|January 13th, 2012                                         |
+-----------------------------------------------------------+
| x | first item                 | second item              |
+-----------------------------------------------------------+
| x | first item                 | second item              |
+-----------------------------------------------------------+

но то, что я получаю, это:

+-----------------------------------------------------------+
|January 12th, 2012                                         |
+-----------------------------------------------------------+
| x            | first item           | second item         |
+-----------------------------------------------------------+
| x            | first item           | second item         |
+-----------------------------------------------------------+
|January 13th, 2012                                         |
+-----------------------------------------------------------+
| x            | first item           | second item         |
+-----------------------------------------------------------+
| x            | first item           | second item         |
+-----------------------------------------------------------+

'x' - это изображение с фиксированной шириной. Я хочу, чтобы первая ячейка была такой же широкой, как изображение.

Вот пример:

<html>
    <body>
        <table>
            <tbody>
                <tr>
                    <td colspan="3">January 12th 2011 this here is just for padding to make table wider</td>
                </tr>
                <tr>
                    <td width="20"> x </td>
                    <td>First item</td>
                    <td>Second item</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

Кажется, что строка, содержащая TD с colspan = 3, заставляет TD в других строках игнорировать атрибут width (я также пытался использовать style width: 20px)

Рендеринг правильный в FF8. Есть идеи, как заставить IE отображать таблицу так, как я хочу?

10 голосов | спросил paul 12 Jpm1000000pmThu, 12 Jan 2012 17:22:12 +040012 2012, 17:22:12

3 ответа


0

Я забыл, что таблица имеет стиль 'table-layout: fixed', и это вызывало трудности. Когда этот стиль установлен, ширины ячеек в первой строке применяются ко всем следующим строкам. Поскольку первая строка содержала colspan, я полагаю, что IE запутался (FF с этим справился).

В любом случае, это не так гибко, как я хотел, но это сработало для меня.

<html>
  <body>
  <div style="width:350px; border:blue 1px solid">
    <table border="0" style="font-family:Arial,Helvetica;font-size:10pt;table-layout:fixed;">
      <tr>
        <td style="width:17px;"/>
        <td style="width:20px;"/>
        <td style="width:180px;"/>
        <td style="width:130px;"/>
      </tr>
      <tr>
        <td colspan="4" style="width:100%;text-align:center;font-eight:bold;background-color:#eef;">09 January 2012</td>
      </tr>
      <tr title="09 January 2012">
        <td align="center" valign="middle" colspan="1" style="width:17px;height:1.1em;"><img src="../../../../_layouts/images/WebParts2010/AWT3_Klein.png" style="border-style:None;border-width:0px;height:1.1em;width:1.1em;" /></td>
        <td align="left" valign="top" colspan="1" style="width:20px;height:1.1em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">LO</td>
        <td align="left" valign="top" colspan="1" style="width:180px;height:1.1em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Customer Name Ltd.</td>
        <td align="left" valign="top" colspan="1" style="width:120px;height:1.1em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Reason for visiting today</td>
      </tr>
    </table>
  </div>
</body>
</html>
ответил paul 13 Jpm1000000pmFri, 13 Jan 2012 14:01:12 +040012 2012, 14:01:12
0

IE всегда обрабатывает ширину ячеек таблицы как минимальную ширину, по крайней мере, до версии 8 (не знаю около 9).

Единственный способ, который я нашел для этого, - это указать явную ширину во всех ячейках таблицы или использовать Javascript для установки ширины после загрузки (но до отображения).

ответил Mr Lister 12 Jpm1000000pmThu, 12 Jan 2012 20:00:51 +040012 2012, 20:00:51
0

Я бы посоветовал дать этим клеткам класс, а затем стиль с помощью

<style>    
.td_class {width: 20px;}
</style>
ответил Daniel Hunter 12 Jpm1000000pmThu, 12 Jan 2012 20:15:18 +040012 2012, 20:15:18

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132