表格

表格

关注
发信
javascript - 带选项的日期选择器，可以选择几天
javascript - PHP/Javascript/AJAX-使用表单重定向页面，然后提交
yeoman - 选择在Yeoman中生成命令的位置
android - 从Android native 代码访问PhoneGap中创建的localStorage或Web数据库
javascript - jQuery验证不绑定(bind)，没有错误
javascript - 在单击时在上下滑动div时添加选项卡下拉列表
javascript - 寻找一个内衬的JavaScript正则表达式替换
javascript - jQuery或Javascript获取窗口父元素
android - Android Canvas绘制的内容不超过屏幕尺寸
javascript - 生成要应用于XML文件的XSL
arrays - 模式中的字符串数组mongoose
django - 如何在Selenium/Django单元测试中创建 session 变量？
java - 字符串[]常量自动排序吗？如何保持索引顺序？
javascript - (()=> {})，而不是JavaScript函数表达式
c# - 错误信息“运算符(operator)'。”将方法转换为扩展方法时，不能应用于“lambda表达式”类型的操作数？

javascript - 嵌套HTML表格的匹配表格高度

扫码查看

我试图在表行内嵌套表，同时保持单个表的外观，如下面的示例所示(一个表，其中一行包含一个数据值，两个表嵌套，一个2x2，另一个3x3):

javascript - 嵌套HTML表格的匹配表格高度-LMLPHP

这只是一个例子。实际表中的行和列明显更多。我之所以要使用表格，是因为列宽和行高可以自然地重排以适合表格数据，而不必担心容器大小(即表格宽度= 100％)。

我遇到的问题是，最高的表会设置行高，但是其他表不会扩展以填充该高度，因此内部边框不会从顶部延伸到底部，如以下代码片段所示:

.display {
	border-collapse: collapse;
}
.display, .display td, .display th {
	border: 1px solid black;
}
.subtable {
	border-collapse: collapse;
}
.subtable td {
	border-top: 0;
	border-bottom: 1px solid black;
	border-left: 0;
	border-right: 1px solid black;
}
.subtable tr td:last-of-type {
	border-top: 0;
	border-bottom: 1px solid black;
	border-left: 0;
  border-right: 0;
}
.subtable tr:last-of-type td {
	border-top: 0;
	border-bottom: 0;
	border-left: 0;
	border-right: 1px solid black;
}
.subtable tr:last-of-type td:last-of-type {
	border: 0;
}
td {
	padding: 5px;
}
td.d-subtable {
	padding: 0;
}
<table class="display" cellpadding="0">
	<tr><th>Customer</th><th>Items</th><th>Payments</th></tr>
	<tr><td>Customer Name</td>
		<td class="d-subtable"><table class="subtable" cellpadding="0"><tr><td>Item1</td><td>5</td><td>$400.00</td></tr><tr><td>Item2</td><td>10</td><td>$200.00</td></tr><tr><td>Item3</td><td>2</td><td>$500.00</td></tr></table></td>
		<td class="d-subtable"><table class="subtable" cellpadding="0"><tr><td>12 Sep 2018</td><td>$3,000.00</td></tr><tr><td>18 Sep 2018</td><td>$2,000.00</td></tr></table></td>
	</tr>
</table>


javascript - 嵌套HTML表格的匹配表格高度-LMLPHP

现在我知道我可以使用rowspan解决此问题(这就是我当前正在解决的问题)，但是这需要预先确定要对齐的行，并且可能会导致出现以下代码段所产生的问题，例如如果将rowspan="2"应用于具有两行的表的第一行(而不是最后一行)，显然会更好:

td {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  width: 500px;
}
<table cellpadding="5">
	<tr><td rowspan="3">x</td>
		<td>problem when you have some really long text in the first row</td><td>p</td><td>a</td><td>b</td><td>c</td></tr><tr><td rowspan="2">z</td><td rowspan="2">q</td><td>d</td><td>e</td><td>f</td></tr><tr><td>g</td><td>some other really long text</td><td>i</td>
  </tr>
</table>


javascript - 嵌套HTML表格的匹配表格高度-LMLPHP

我希望上表看起来像这样:

javascript - 嵌套HTML表格的匹配表格高度-LMLPHP

有没有一种方法可以使用HTML / CSS实现我想要的？表中有很多行，因此我更希望浏览器在渲染之前对其进行排序。但是，如果不可能，我可以使用Javascript / JQuery解决方案。

更新

尽管我当时确实找到了一个可行的解决方案(请参阅我发布的答案)，但此后我遇到了一些情况，由于无法预期所有可能的数据，很难预先设置列的宽度(甚至是百分比)。被显示。因此，我希望找到一个不依赖于此的答案。

由于我没有像应该说的那样清楚，因此我想在其中嵌套表格的多个行，同时保持高度和列宽的匹配。例如，对于两行，我希望能够创建这样的布局:

javascript - 嵌套HTML表格的匹配表格高度-LMLPHP

原始表格HTML的结果如下:

javascript - 嵌套HTML表格的匹配表格高度-LMLPHP

		.display {
			border-collapse: collapse;
		}
		.display, .display td, .display th {
			border: 1px solid black;
		}
		.subtable {
			border-collapse: collapse;
		}
		.subtable td {
			border-top: 0;
			border-bottom: 1px solid black;
			border-left: 0;
			border-right: 1px solid black;
		}
		.subtable tr td:last-of-type {
			border-top: 0;
			border-bottom: 1px solid black;
			border-left: 0;
			border-right: 0;
		}
		.subtable tr:last-of-type td {
			border-top: 0;
			border-bottom: 0;
			border-left: 0;
			border-right: 1px solid black;
		}
		.subtable tr:last-of-type td:last-of-type {
			border: 0;
		}
		td {
			padding: 5px;
		}
		td.d-subtable {
			padding: 0;
		}
<table class="display" cellpadding="0">
	<tr><th>Customer</th><th>Items</th><th>Payments</th></tr>
	<tr><td>Customer 1</td>
		<td class="d-subtable"><table class="subtable" cellpadding="0"><tr><td>Item1</td><td>5</td><td>$400.00</td></tr><tr><td>Item2</td><td>100</td><td>$20.00</td></tr><tr><td>Item3</td><td>2</td><td>$500.00</td></tr></table></td>
		<td class="d-subtable"><table class="subtable" cellpadding="0"><tr><td>12 Sep 2018</td><td>$3,000.00</td></tr><tr><td>18 Sep 2018</td><td>$2,000.00</td></tr></table></td>
	</tr>
	<tr><td>Customer 304</td>
		<td class="d-subtable"><table class="subtable" cellpadding="0"><tr><td>Item4</td><td>5</td><td>$6.00</td></tr></table></td>
		<td class="d-subtable"><table class="subtable" cellpadding="0"><tr><td>20 Sep 2018</td><td>$4.00</td></tr><tr><td>27 Sep 2018</td><td>$26.00</td></tr></table></td>
	</tr>
</table>

最佳答案

我建议使用flex来满足您的需求。 Flex对于这种布局非常强大，因为我们可以轻松地让内容对其进行指导。请参阅附件。它完全由HTML和CSS制成。不需要固定大小，也不需要Javascript。

(旧代码段)

.outer {
  display: flex;
  flex-wrap: wrap;

  /* For demo purposes */
  max-width: 500px;
  margin: 20px auto;
  border-left: 1px solid black;
  border-top: 1px solid black;
}

.column {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.row {
  display: flex;
  flex-direction: row;
  flex: 1 1 auto;
}

.inner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.item {
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  text-align: center;
  padding: 3px;
}

.item.heading {
  font-weight: bold;
}

.item:not(.heading) {
  flex: 1 1 auto;
  justify-content: center;
  align-items: center;
  display: flex;
}

.fixed .narrow {
  flex-basis: 20px;
}
<div class="outer">
  <div class="column">
    <div class="item heading">Customer</div>
    <div class="item">
      <span>Customer Name</span>
    </div>
  </div>
  <div class="column">
    <div class="item heading">Items</div>
      <div class="inner fixed">
        <div class="row">
          <div class="item">Item1</div>
          <div class="item narrow">5</div>
          <div class="item last">$400.00</div>
        </div>
        <div class="row">
          <div class="item">Item2</div>
          <div class="item narrow">10</div>
          <div class="item last">$200.00</div>
        </div>
        <div class="row">
          <div class="item">Item3</div>
          <div class="item narrow">2</div>
          <div class="item last">$500.00</div>
        </div>
    </div>
  </div>
  <div class="column">
    <div class="item heading">Payments</div>
    <div class="inner">
      <div class="row">
        <div class="item">12 sep 2018</div>
        <div class="item">$3,000.00</div>
      </div>
      <div class="row">
        <div class="item">
          18 sep 2018
        </div>
        <div class="item">
          $2,000.00
        </div>
      </div>
    </div>
  </div>
</div>


更新:根据您的评论/答案进行了更改。它在某种程度上取决于您的HTML结构。我必须将标题移动到其自己的“.row.row-item”，因此需要设置一个伸缩基础以对齐列。可以使用多个“.row.row-item”扩展它。请参见下面的代码段。

.outer {
  display: flex;
  flex-wrap: wrap;

  /* For demo purposes */
  max-width: 600px;
  margin: 20px auto;
  border-left: 1px solid black;
  border-top: 1px solid black;
}

.column {
  flex: 1 1 33.33%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.row {
  display: flex;
  flex-direction: row;
  flex: 1 1 auto;
}

.row-item {
  flex-basis: 100%;
}

.inner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.item {
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  text-align: center;
}

.item.heading {
  font-weight: bold;
  flex: 1 1 33.33%;
}

.item:not(.heading) {
  flex: 1 1 33.33%;
  justify-content: center;
  align-items: center;
  display: flex;
}

.fixed .narrow {
  flex: 1 1 20px;
}
<div class="outer">
  <div class="row row-item">
    <div class="item heading">Customer</div>
    <div class="item heading">Items</div>
    <div class="item heading">Payments</div>
  </div>
  <div class="row row-item">
    <div class="column">
      <div class="item">
        <span>Customer 1</span>
      </div>
    </div>
    <div class="column">
        <div class="inner fixed">
          <div class="row">
            <div class="item">Item1</div>
            <div class="item narrow">5</div>
            <div class="item last">$400.00</div>
          </div>
          <div class="row">
            <div class="item">Item2</div>
            <div class="item narrow">10</div>
            <div class="item last">$200.00</div>
          </div>
          <div class="row">
            <div class="item">Item3</div>
            <div class="item narrow">2</div>
            <div class="item last">$500.00</div>
          </div>
      </div>
    </div>
    <div class="column">
      <div class="inner">
        <div class="row">
          <div class="item">12 sep 2018</div>
          <div class="item">$3,000.00</div>
        </div>
        <div class="row">
          <div class="item">
            18 sep 2018
          </div>
          <div class="item">
            $2,000.00
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row row-item">
    <div class="column">
      <div class="item">
        <span>Customer 304</span>
      </div>
    </div>
    <div class="column">
        <div class="inner fixed">
          <div class="row">
            <div class="item">Item4</div>
            <div class="item narrow">5</div>
            <div class="item last">$6.00</div>
          </div>
      </div>
    </div>
    <div class="column">
      <div class="inner">
        <div class="row">
          <div class="item">20 sep 2018</div>
          <div class="item">$4.00</div>
        </div>
        <div class="row">
          <div class="item">
            27 sep 2018
          </div>
          <div class="item">
            $26.00
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row row-item">
    <div class="column">
      <div class="item">
        <span>Customer 605</span>
      </div>
    </div>
    <div class="column">
        <div class="inner fixed">
          <div class="row">
            <div class="item">Item5</div>
            <div class="item narrow">50</div>
            <div class="item last">$60.00</div>
          </div>
          <div class="row">
            <div class="item">Item6</div>
            <div class="item narrow">3</div>
            <div class="item last">$260.00</div>
          </div>
      </div>
    </div>
    <div class="column">
      <div class="inner">
        <div class="row">
          <div class="item">29 sep 2018</div>
          <div class="item">$40.00</div>
        </div>
        <div class="row">
          <div class="item">
            30 sep 2018
          </div>
          <div class="item">
            $206.00
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

07-24 17:54
查看更多
Powered by LMLPHP ©2025 表格 0.030483