- PR -

JavaScript(+DOM)でTABLEに行を追加したが、CSSのborder要素がFireFoxで（画面）に反映されない

1
投稿者投稿内容
ina
ベテラン
会議室デビュー日: 2005/04/14
投稿数: 58
投稿日時: 2006-04-12 22:33
inaと申します。
以下の様な、JavaScript(+DOM)でTABLE要素に動的に行を追加するコードを記述しているのですが、このコード、IE6だとちゃんと枠線が表示されてくれるのですが、FireFoxだと枠線が表示されてくれません。
※alert(document.getElementById('xx').innerHTML)で確認しましたが、
きちんと<tr><td class="ab">yyy</td></tr>となっています。

FireFox（と言うよりIE以外？）でも、枠線を表示させるにはどの様にすれば良いのかが分からず、はまってしまっています。
ご存じの方がいらっしゃいましたら、是非ともご教示していただきたいです。
以上です。よろしくお願いいたします。

コード:
<style type="text/css">
<!--
  .ab {
    border-collapse:collapse;
    border:thin solid black;
  }
-->
</style>
<script type="text/JavaScript">
<!--
 function add_row(){
  table = document.getElementById('xx');
  row = table.insertRow(table.rows.length);
  cell = row.insertCell(0);
  cell.className='ab';
  cell.appendChild(document.createTextNode('yyy'));
 }
じゃんぬねっと
ぬし
会議室デビュー日: 2004/12/22
投稿数: 7811
お住まい・勤務地: 愛知県名古屋市
投稿日時: 2006-04-13 02:18
cell.style.border = ... でいけませんか?
それと、FireFox 相手であれば td.ab {...} と、要素を指定した方が良いですね。

_________________
C# と VB.NET の入門サイト
じゃんぬねっと日誌
ina
ベテラン
会議室デビュー日: 2005/04/14
投稿数: 58
投稿日時: 2006-04-13 10:05
じゃんぬねっと様、お返事ありがとうございます。
早速、ご指摘の方法で試してみたのですが、上手くいきませんでした。

が、私の方でいろいろと試してみたところ、原因はこのセルを含むTR要素やTABLE要素に指定しているborder絡みの指定に問題があったみたいです。
※以下の様に試してみたら、上手くいきました。
1.TABLE要素中の全てのborder絡みのstyle指定を削除。
2.table,th,tr,td{border-collapse:collapse;border:thin solid black;}を指定
3.実行　→　OK

と言うことで、単純にCSSの指定が間違っていた様ですので、styleの継承関係などに留意して正しい指定に直せば上手くいくと思っています。
以上です、どうもありがとうございました。

#HTMLでのみ記述している状態だと上手く表示されていたので、問題無いと思っていたんですよね、うーん、残念。
1

スキルアップ／キャリアアップ（JOB@IT）