html - 将td一分为二

Question

我正在尝试拆分 TD（表格单元格），使其看起来好像是两个单元格。问题是当单元格在高度中增长时，我无法让里面的两个 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

你应该设置高度 td height=100%, .span1 set height=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 个 td 而不是试图模仿 2？

score 0 · Accepted Answer

您可以在该表格单元格中放置一个表格，然后在该内部表格中您可以做任何您想做的事情，例如td colspan="2"顶行，td td 底行（这让我想起了表格布局的丑陋日子，但无论什么都适用你！）

score 0 · Accepted Answer

我也一直在寻找一种拆分 TD（表格数据单元）的方法。在阅读了很多帖子和几次失败的尝试之后，我终于破解了它。非常感谢所有之前发布的人，因为我能够将这些点联系起来，这要归功于您。

您需要记住两件事，影响标题行和结果数据行。我的意思是顶行[影响标题行]中使用'colspan'的单元格直接影响它们下方行中的单元格[结果数据行]。例如，如果我的结果行（第 2 行）必须包含拆分的 TD，那么它会受到上面在其 TD（第 1 行）中使用“colspan”的行的影响。但是，如果下一行（第 3 行）必须不受来自第 1 行的 'colspan' 的影响，则下一行（第 3 行）中的单元格必须与第 1 行中的单元格具有相同的 'colspan' 属性，这样可以防止它们不会被分裂，并使它们“跨越”常规间隙。

在图像 [单击链接查看图像] 中，我只有 2 列 [第 2 列和第 4 列] 在它们下方拆分 TD。在第一行中，我使用“colspan”来影响下面的行。但是，我不希望第 2 行和第 3 行分开，因此它们具有与第 1 行相同的“colspans”。我确实想拆分第 4 行和第 5 行中的单元格 [当然只在第 2 列和第 4 列中]，因此要做到这一点，它们不包含“colspan”属性，这使得它们受到它们上面的行的影响，这些行确实使用了 '科尔斯潘'。第 6 行不受前行中的“colspan”的影响，因为它包含与前 3 行相同的“colspan”属性。第 7 行和最后一行包含拆分 TD，因为它与第 4 行和第 5 行一样，不包含“colspan”。这听起来可能令人困惑，但是，如果您查看图像并尝试源代码，我想您会非常高兴。我希望这有帮助。

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>

html - 将td一分为二

4 回答 4

Related

Reference