[css] кроссбраузерная таблица без данных

pilot

Вот такая штука работает в FF 2 и Safari.
<html>

  <head>

    <title> Test </title>

    <script type="text/javascript">

      function init{

      var root = document.getElementById('table');

      var cols = 4;

      var rows = 50;

      var str = '';

      for(var i=0;i<rows;i++){

          str+='<tr>';

	  for(var j=0;j<cols;j++){

	      str+='<td>';

	  }

	  str+='</tr>';

      };

      root.innerHTML+= str;

      }

    </script>

    <style>

      table#table td { background-color: red;}

    </style>

  </head>

  <body onload="init;">

    <table id="table" cellspacing="1" cellpadding="1">

      <colgroup span="4" width="10">

	<col/><col/><col width="20"/><col/>

      </colgroup>

    </table>

  </body>

</html>

В Opera и IE (Mac) ее не видно.
Хочется найти сочетание CSS, при котором во всех браузерах показывается то же что и в FF2.
На крайняк можно отдельные CSS для каждого браузера.
Что-то никак не подберу.
Как оно выглядит в FF2:

Как в Safari:

splinter

Для того, чтобы таблица отображалась в ФФ и сафари, необходимо сначала добавить элемент tbody в table, а уж потом в tbody добавлять tr.
А для эквивалентного отображений таблиц используй директиву DOCTYPE в начале документа.

pilot

Она отображается в ФФ и Сафари, она не отображается в Опере, но я переделал:
<html>

  <head>

    <title> Test </title>

    <script type="text/javascript">

      function init{

      var root = document.getElementById('tbody');

      var cols = 4;

      var rows = 50;

      var str = '';

      for(var i=0;i<rows;i++){

          str+='<tr>';

	  for(var j=0;j<cols;j++){

	      str+='<td>';

	  }

	  str+='</tr>';

      };

      root.innerHTML = str;

      }

    </script>

    <style>

      table#table td { background-color: red;}

    </style>

  </head>

  <body onload="init;">

    <table id="table" cellspacing="1" cellpadding="1">

      <colgroup span="4" width="10">

	<col/><col/><col width="20"/><col/>

      </colgroup>

      <tbody id="tbody"></tbody>

    </table>

  </body>

</html>

А для эквивалентного отображений таблиц используй директиву DOCTYPE в начале документа

Спасибо, сейчас посмотрю.

pilot

Нашел еще места где я неправ (незакрытые тэги).
Оперу поставил поновее, 9-10.
Теперь Опера работает. Opera 8-54 не работает все равно (на ней и тренировался, а зря).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

  <head>

    <title> Test </title>

    <script type="text/javascript">

      function init{

      var root = document.getElementById('tbody');

      var cols = 4;

      var rows = 5;

      var str = '';

      for(var i=0;i<rows;i++){

          str+='<tr>';

	  for(var j=0;j<cols;j++){

	      str+='<td></td>';

	  }

	  str+='</tr>';

      };

      root.innerHTML = str;

      }

    </script>

    <style>

      table#table td { background-color: red;}

    </style>

  </head>

  <body onload="init;">

    <table id="table" cellspacing="1" cellpadding="1">

      <colgroup span="4" width="10">

	<col/><col/><col width="20"/><col/>

      </colgroup>

      <tbody id="tbody"></tbody>

    </table>

  </body>

</html>

splinter

возможно в опере 8.54 не прокатывает innerHTML.
Попробуй воспользоваться моделью DOM.
типа 


var tableEl = document.createElement('table');

var tbodyEl = document.createElement('tbody');

tableEl.appendChild(tbodyEl);

...

и так далее. Думаю идея ясна.
Вообще советую посмотреть как делают отцы. К примеру возьми wysiwyg html редактор какой-нибудь, скажем tinyMCE с открытым исходным кодом и посмотри как там управляются с DOM моделью посредством JavaScript.
 
А вообще поддержка кросс-бруазерности -
такая непростая работа. Часто бывает, чтобы работала какая-то вещь, необходимо для каждого браузера писать определенную реализацию и производить проверку на версию браузера.

pilot

Попробуй воспользоваться моделью DOM.
типа
Я знаю что это за штука. Так таблица медленнее генерится. Раза в 3-5. Если вместо <td></td> поставить <td>.</td> то видно, что таблица есть. Просто когда она пустая, ее съедает сотона.

kruzer25

А если вместо <td></td> поставить <td>&nbsp;</td>?

Ivan826

ты это, теги хоть правильно закрывай. не <col/> а <col /> и т.д
а innerHTML работает везде

banderon

Я неудачник.
У меня innerHTML не работает
Mozilla/5.0 (compatible; Konqueror/3.5; Linux; X11; x86_64; ru, en_US) KHTML/3.5.6 (like Gecko)

pilot

ты это, теги хоть правильно закрывай. не <col/> а <col /> и т.д
угу
Оставить комментарий
Имя или ник:
Комментарий: