html - td を 2 つに分割

Question

TD (テーブルセル) を分割して、2 つのセルのように見せようとしています。問題は、セルが高さで大きくなると、内部の 2 つの div を作成して使用可能なすべての高さを占めることができないことです。これらのセルは動的に成長する可能性があるため、固定の高さを設定することもできません (問題を解決できます)。

これが私のコードです：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  td { border: 1px solid black; width: 50px; text-align: center; margin:0; padding:0 }
  #span1 { background-color: #DDD; width: 25px; float: right; }
  #span2 { background-color: #EEE; width: 24px; float: left; }
  .t { border-top: 1px solid black; }
  .r { border-right: 1px solid black; height: 100%; }
</style>
</head>
<body>
  <table>
    <tbody>
      <tr>
        <td>1</td><td>2</td><td>3<div><div id="span1" class="t">1</div><div id="span2" class="t r">1</div></div></td><td>4</td>
      </tr>
      <tr>
        <td>1</td><td>2</td><td><div id="span1">3</div><div id="span2" class="r">3</div></td><td>4</td>
      </tr>
      <tr>
        <td>1</td><td>2 2 2 2 2 22 2 </td><td><div id="span1">3</div><div id="span2" class="r">3</div></td><td>4</td>
      </tr>
      <tr>
        <td>1</td><td>2</td><td><div id="span1">3</div><div id="span2" class="r">3</div></td><td>4</td>
      </tr>
      <tr>
        <td>1</td><td>2 2 2 2 2 2 2 2 </td><td><span style="line-height:2"><div id="span1">3</div><div id="span2" class="r">3</div></span></td><td>4</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

これはどのように見えるかです：

現在のテーブルビュー

3 列目の白い隙間は見たくありません。

これを解決する方法はありますか？私はこれまでのところ運がなく、CSSとしばらく戦ってきました...

ありがとう！。

score 12 · Accepted Answer

高さtdheight= 100％を設定し、.span1高さ= 100％を設定してから、これを試して答えを得ることができます。

<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  td { border: 1px solid black; width: 50px; text-align: center; margin:0; padding:0; height:100%; }
  #span1 { background-color: #DDD; width: 25px; float: right; height:100%; }
  #span2 { background-color: #EEE; width: 24px; float: left; }
  .t { border-top: 1px solid black; }
  .r { border-right: 1px solid black; height: 100%; }
</style>
</head>
<body>
  <table>
    <tbody>
      <tr>
        <td>1</td><td>2</td><td>3<div><div id="span1" class="t">1</div><div id="span2" class="t r">1</div></div></td><td>4</td>
      </tr>
      <tr>
        <td>1</td><td>2</td><td><div id="span1">3</div><div id="span2" class="r">3</div></td><td>4</td>
      </tr>
      <tr>
        <td>1</td><td>2 2 2 2 2 22 2 </td><td><div id="span1">3</div><div id="span2" class="r">3</div></td><td>4</td>
      </tr>
      <tr>
        <td>1</td><td>2</td><td><div id="span1">3</div><div id="span2" class="r">3</div></td><td>4</td>
      </tr>
      <tr>
        <td>1</td><td>2 2 2 2 2 2 2 2 </td><td><span style="line-height:2"><div id="span1">3</div><div id="span2" class="r">3</div></span></td><td>4</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

score 2 · Accepted Answer

設定してみる

display:inline-block

高さ 100% も追加する必要がある場合とない場合があります。

また、2を模倣しようとするのではなく、単純に2 tdを追加する方法はありませんか??

score 0 · Accepted Answer

また、TD (テーブルデータセル) を分割する方法も探しています。多くの投稿を読んだ後、何度か試みに失敗した後、私はついにそれを解読しました. 私が点をつなぐことができたのはあなたの功績であるため、以前に投稿したすべての人に感謝します.

Affecting Header Row と Resulting Data Row という 2 つの点に注意する必要があります。これが意味することは、「colspan」を使用する一番上の行 [Affecting Header Row] のセルが、その下の行のセル [Resulting Data Row] に直接影響するということです。たとえば、結果の行 (2 番目の行) に分割 TD が含まれている必要がある場合、TD で「colspan」を使用する上の行 (1 番目の行) の影響を受けます。ただし、次の行 (3 行目) が 1 行目の 'colspan' の影響を受けないようにする必要がある場合、次の行 (3 行目) のセルは 1 行目のセルと同じ 'colspan' 属性を持つ必要があります。それらが分割されるのを防ぎ、通常のギャップに「またがる」ようにします。

画像 [リンクをクリックして画像を表示] では、その下に TD を分割している 2 つの列 [2 番目と 4 番目の列] しかありません。最初の行では、「colspan」を使用して下の行に影響を与えます。ただし、2 番目と 3 番目の行を分割したくないため、1 番目の行と同じ「colspans」を持ちます。私は4行目と5行目[もちろん2列目と4列目のみ]でセルを分割したいので、これを達成するために「colspan」属性を含まないため、「を使用するそれらの上の行の影響を受けます」コルスパン」。6 行目は、最初の 3 行と同じ「colspan」属性が含まれているため、前の行の「colspans」の影響を受けません。7 行目と最後の行には、行 4 と 5 のように「colspans」が含まれていないため、分割 TD が含まれています。これは紛らわしく聞こえるかもしれませんが、ですが、画像を見てソースコードを試してみると、とても喜んでいただけると思います。これが役立つことを願っています。

https://www.flickr.com/photos/12121792@N02/sets/72157651047314439/

<table border="1px solid" cellspacing="5" bordercolor="#000000" width="959" cellpadding="5">
  <tr align="justify" valign="top">
    <td valign="middle" bgcolor="#FFFFFF" width="210"><h4 style="color:#000000" align="center">Nothing Special Here</h4></td>
    <td colspan="2" valign="middle" bgcolor="#6E7F8B"><h4 style="color:#FFFFFF" align="center">Colspan=&quot;2&quot;</h4></td>
    <td valign="middle" bgcolor="#6E7F8B" width="191"><h4 style="color:#FFFFFF" align="center">No Colspan Here</h4></td>
    <td colspan="2" valign="middle" bgcolor="#6E7F8B"><h4 style="color:#FFFFFF" align="center">Colspan=&quot;2&quot;</h4></td>
  </tr>
  <tr class="gray1" valign="top" align="justify">
    <td valign="middle"><p align="justify">Nothing Special Here</p></td>
    <td colspan="2" valign="middle"><p align="center">Colspan=&quot;2&quot;</p></td>
    <td width="191" valign="middle"><p align="center">No Colspan Here</p></td>
    <td colspan="2" valign="middle"><p align="center">Colspan=&quot;2&quot;</p></td>
  </tr>
  <tr class="gray1" valign="top" align="justify">
    <td valign="middle"><p align="justify">Nothing Special Here</p></td>
    <td colspan="2" valign="middle"><p align="center">Colspan=&quot;2&quot;</p></td>
    <td width="191" valign="middle"><p align="center">No Colspan Here</p></td>
    <td colspan="2" valign="middle"><p align="center">Colspan=&quot;2&quot;</p></td>
  </tr>
  <tr class="gray1" valign="top" align="justify">
    <td valign="middle"><p align="justify">Nothing Special Here</p></td>
    <td width="129" valign="middle"><p align="center">Nothing Special</p></td>
    <td width="120" valign="middle"><p align="center">Nothing Special</p></td>
    <td width="191" valign="middle"><p align="center">Nothing Special</p></td>
    <td width="99" valign="middle"><p align="center">Nothing Special</p></td>
    <td width="101" valign="middle"><p align="center">Nothing Special</p></td>
  </tr>
  <tr class="gray1" valign="top" align="justify">
    <td valign="middle"><p align="justify">Nothing Special Here</p></td>
    <td valign="middle"><p align="center">Nothing Special</p></td>
    <td valign="middle"><p align="center">Nothing Special</p></td>
    <td valign="middle"><p align="center">Nothing Special</p></td>
    <td valign="middle"><p align="center">Nothing Special</p></td>
    <td width="101" valign="middle"><p align="center">Nothing Special</p></td>
  </tr>  
  <tr class="gray1" valign="top" align="justify">
    <td valign="middle"><p align="justify">Nothing Special Here</p></td>
    <td colspan="2" valign="middle"><p align="center">Colspan=&quot;2&quot;</p></td>
    <td valign="middle"><p align="center">No Colspan Here</p></td>
    <td colspan="2" valign="middle"><p align="center">Colspan=&quot;2&quot;</p></td>
  </tr>  
  <tr class="gray1" valign="top" align="justify">
    <td valign="middle"><p align="justify">Nothing Special Here</p></td>
    <td valign="middle"><p align="center">Nothing Special</p></td>
    <td valign="middle"><p align="center">Nothing Special</p></td>
    <td valign="middle"><p align="center">Nothing Special</p></td>
    <td valign="middle"><p align="center">Nothing Special</p></td>
    <td valign="middle"><p align="center">Nothing Special</p></td>        
  </tr>  
</table>

score 0 · Accepted Answer

そのテーブルセルの中にテーブルを入れることができ、その内側のテーブルはtd colspan="2"、一番上の行のように、好きなことをすることができ、一番下の行は td td です (これは、テーブルレイアウトの醜い時代を思い出させますが、何でもうまくいきますあなた！）

html - td を 2 つに分割

4 に答える 4

Related

Reference