8

私はテーブルを持っています。例えば：

<table>

<tr>
  <td>apple</td>
  <td>big</td>
</tr>

<tr>
  <td>pickle</td>
  <td>small</td>
</tr>

</table>

派手なjQueryの後...

<table>

<tr>
  <td>apple</td>
  <td>big</td>
  <td>10kg  ------ Is this nice to do, any potential issues?</td>
</tr>

<tr>
  <td>pickle</td>
  <td>small</td>
</tr>

</table>

楽しみのために: http://jsfiddle.net/Czcby/

4

4 に答える 4

4

最初の行に 3 つのセルがあり、2 番目の行に 2 つのセルがあります。

これは通常は表示されませんが、表のセルにマージン/境界線/パディングがある場合は、表の表示とレイアウトに影響を与える可能性があります。

于 2013-01-14T15:20:43.520 に答える
3

簡単な答えは、私にとってはそうです。

より詳細な答えは次のとおりです。厳密に一貫している必要はありませんが、ブラウザ間でテーブルの一貫性を確認したい場合は確かに役立ちます。言うまでもなく、現在一貫性がないことは、現在問題を引き起こしているようには見えませんが、テーブル、そのスタイル、またはテーブル内のデータにさらに多くのことをしたい場合に、より大きな影響を及ぼします。

このJSFiddleをさまざまなブラウザでチェックアウトすると、さまざまな動作が表示される場合があります。

  • ChromeとIE8：2つの通常のセルから突き出た余分なセルがあるものとしてテーブルをレンダリングします。
  • Firefox：事実上、3番目の列に余分な空のセルがあるように見えます。

テーブルが大きくなるにつれて、これらのさまざまな状況のスタイリングに関して複雑さを想像してみてください。

間違いなく、colspanプロパティはこれを回避する方法です。colspanかなり醜いと思います。列ヘッダーを確認し、それを下にスクロールしてそのヘッダーに関連する情報を確認できるように、テーブルを表示する必要があります。他のデータが列に到達するのは気が散ることです。しかし、それはあなたがやろうとしていることに正確に依存します。

プレゼンテーションと情報デザインの問題はさておき、コードを見ている人が各行にいくつのセルがあるかを知る方法がないかもしれません。各行に一貫した番号を設定して、テーブルまたはその中のデータで他のことを行う必要がある場合にすばやく簡単に確認できるようにすることをお勧めします。デバッグに役立ちます。

お役に立てれば。

于 2013-01-14T15:34:57.470 に答える
2

それを行うのに問題はありませんが、td行 1 に 3 があり、行 2 に 2 があるため、フォーマットの問題に直面する可能性があります。

于 2013-01-14T15:20:08.790 に答える
1

td が 2 列を使用する場合は colspan="2" を使用します。

于 2013-01-14T15:23:06.503 に答える