Html 将td一分为二_Html_Css_Html Table

Html 将td一分为二

html css

Html 将td一分为二,html,css,html-table,Html,Css,Html Table,我试图将一个TD（表格单元格）拆分成两个单元格。问题是，当单元格的高度增加时，我无法使内部的两个div占据所有可用的高度。由于这些细胞可以动态生长，我也无法设置固定高度（这可以解决问题）这是我的代码： <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>JS Bin</title> <!--[if IE]> <script src="

我试图将一个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>


JS-Bin
文章、旁白、数字、页脚、页眉、H组、，
菜单，导航，部分{显示：块；}
td{边框：1px纯黑色；宽度：50px；文本对齐：中心；边距：0；填充：0}
#span1{背景色：#DDD；宽度：25px；浮动：右；}
#span2{背景色：#EEE；宽度：24px；浮动：左；}
.t{边框顶部：1px纯黑色；}
.r{右边框：1px纯黑色；高度：100%；}
123114
12334
12 2 2 2 2 22 2 334
12334
12 2 2 2 2 2 2 2 334

这就是它的外观：

<!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斗争了一段时间，到目前为止还没有运气

谢谢

尝试设置

display:inline-block

也可能需要或不需要添加100%的高度

同样，你也无法简单地添加2个td，而不是试图模仿2？？？

你可以在表格单元格中放置一个表格，然后在内部表格中你可以做任何你想做的事情，比如顶部行添加2个td，底部行添加td（这让我想起了表格布局的丑陋时代，但无论什么都适合你！）

您应该将高度设置为td height=100%，并将.span1设置为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>


JS-Bin
文章、旁白、数字、页脚、页眉、H组、，
菜单，导航，部分{显示：块；}
td{边框：1px纯黑色；宽度：50px；文本对齐：中心；边距：0；填充：0；高度：100%；}
#span1{背景色：#DDD；宽度：25px；浮动：右；高度：100%；}
#span2{背景色：#EEE；宽度：24px；浮动：左；}
.t{边框顶部：1px纯黑色；}
.r{右边框：1px纯黑色；高度：100%；}
123114
12334
12 2 2 2 2 22 2 334
12334
12 2 2 2 2 2 2 2 334

我也一直在寻找拆分TD（表格数据单元）的方法。在读了很多帖子，尝试了几次失败后，我终于破解了它。非常感谢所有以前发过帖子的人，因为我能够把这些点联系起来是因为你们的功劳

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

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


这里没什么特别的
Colspan=“2”
这里没有科尔斯潘
Colspan=“2”
这里没有什么特别的
Colspan=“2”
此处无Colspan
Colspan=“2”
这里没有什么特别的
Colspan=“2”
此处无Colspan
Colspan=“2”
这里没有什么特别的
没什么特别的
没什么特别的
没什么特别的
没什么特别的
没什么特别的
这里没有什么特别的
没什么特别的
没什么特别的
没什么特别的
没什么特别的
没什么特别的
这里没有什么特别的
Colspan=“2”
此处无Colspan
Colspan=“2”
这里没有什么特别的
没什么特别的
没什么特别的
没什么特别的
没什么特别的
没有什么特别的

而实际上分割tds不是一个选项吗？然后，顶部的“3”可能位于带有

colspan=“2”

的td中。您的意思是，通过使用colspan和/或rowspan？如果是这样的话，那就不行了。虽然我可以在单元格中放入我想要的任何内容（不修改列/行的数量），但我相信一定有更好的方法来实现我的目的