具有流体高度的表格行跨度的 CSS 等效项 [英] CSS Equivalent of Table Rowspan with Fluid Height

查看：10
本文介绍了具有流体高度的表格行跨度的 CSS 等效项的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试使用 CSS 完成以下操作:

<tr><td rowspan="2">这一行应该等于坐在右边的 2 行的高度(不允许固定高度).</td><td>这是一些示例文本.以及一些额外的示例文本.</td></tr><tr><td>这是一些示例文本.以及一些额外的示例文本.</td></tr>

替代文字"

我见过的实现此目的的示例使用固定高度或允许内容环绕左列.有没有一种优雅的方式使用 CSS 来实现这一点?

解决方案

首先，你所做的事情在我看来就像一张桌子，所以你可能需要考虑一下.然而，用 CSS 做它有点棘手(除非你在 CSS 中做表格样式).以下代码有效，但不会使框中的文本垂直居中:

Test2<div style="width:300px; padding: 2px; border: 1px solid black;"><div style="float:right; width: 100px;"><div style="border: 1px 纯黑色; margin-bottom: 2px;">这是一些示例文本.以及一些额外的示例文本.

<div style="border: 1px solid black;">这是一些示例文本.以及一些额外的示例文本.

<div style="border: 1px 纯黑色; margin-right: 102px;"><div>此列应等于右侧的 2 行的高度(不允许固定高度).

<div style="clear: right; margin-bottom: -1px;"></div>

</div></body></html>

CSS 中的表格单元格更简单:

<html><head><title>Test2</title></head><body><div style="display: table; width:300px; border: 1px solid black; border-spacing: 2px;"><div style="display: table-cell; border: 1px solid black; vertical-align: middle;">此列应等于右侧的 2 行的高度(不允许固定高度).

<div style="display: table-cell; width: 100px;"><div style="border: 1px 纯黑色; margin-bottom: 2px;">这是一些示例文本.以及一些额外的示例文本.

<div style="border: 1px solid black;">这是一些示例文本.以及一些额外的示例文本.

I'm trying to accomplish the following using CSS:

<table border="1" width="300px">
<tr>
    <td rowspan="2">This row should equal the height (no fixed-height allowed) of the 2 rows sitting to the right.</td>
    <td>Here is some sample text.  And some additional sample text.</td>
</tr>
<tr>
    <td>Here is some sample text.  And some additional sample text.</td>
</tr>
</table>

The examples I've seen for accomplishing this utilize fixed heights or allow the content to wrap around the left column. Is there an elegant way to accomplish this using CSS?

解决方案

First of all, what you are doing looks like a table to me, so you might want to consider that. Doing it with CSS however is a bit more tricky (unless you do the table styling in CSS). The following code works but does not center vertically the text in the box:

<html><head><title>Test2</title></head><body>
<div style="width:300px; padding: 2px; border: 1px solid black;">
  <div style="float:right; width: 100px;">
    <div style="border: 1px solid black; margin-bottom: 2px;">
      Here is some sample text. And some additional sample text.
    </div>
    <div style="border: 1px solid black;">
      Here is some sample text. And some additional sample text.
    </div>
  </div>
  <div style="border: 1px solid black; margin-right: 102px;">
    <div>
      This column should equal the height (no fixed-height allowed) of the 2 rows sitting to the right.
    </div>
    <div style="clear: right; margin-bottom: -1px;"></div>
  </div>
</div></body></html>

Table cells in CSS are easier:

<!DOCTYPE html>
<html><head><title>Test2</title></head><body>
<div style="display: table; width:300px; border: 1px solid black; border-spacing: 2px;">
  <div style="display: table-cell; border: 1px solid black; vertical-align: middle;">
    This column should equal the height (no fixed-height allowed) of the 2 rows sitting to the right.
  </div>
  <div style="display: table-cell; width: 100px;">
    <div style="border: 1px solid black; margin-bottom: 2px;">
      Here is some sample text. And some additional sample text.
    </div>
    <div style="border: 1px solid black;">
      Here is some sample text. And some additional sample text.
    </div>
  </div>
</div>
</body>
</html>

这篇关于具有流体高度的表格行跨度的 CSS 等效项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆