html - 如何设置表格样式以鼓励某些单元格先垂直生长再水平生长

Question

我有一个 HTML 表格，简化为:

<table border=1>
  <tr>
    <td style='white-space: nowrap;' >alpha alpha alpha </td>
    <td rowspan=3>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
    <td>alpha</td>
  </tr>
  <tr>
    <td style='white-space: nowrap;' >beta beta beta </td>
    <td>beta</td>
  </tr>
  <tr>
    <td style='white-space: nowrap;' >gamma gamma gamma </td>
    <td>gamma</td>
  </tr>
</table>

https://jsfiddle.net/1v2h4x9a/

这通常显示为:

我宁愿让它自动换行以占用可用的垂直空间。因此，它应该呈现为:

此处的目标是有效利用屏幕空间。 IE。当有额外的行来包裹文本时，为什么列应该变宽。

此外，我只想使用 HTML 和 CSS 来完成此操作。没有javascript。我愿意看到基于 javascript 的答案(但不太可能想要它)。

请注意，真实表格有多个高度不同的列，最左边的列与其余列交错排列，但不值得在示例中显示。此外，如果其他东西还没有形成垂直空间，我更希望单元格水平增长。

我试过将表格宽度设置得较小:这会导致第二列变得非常窄并推高高度。

Answer 1

你是对的。你不会喜欢的。但这里是你如何做到的——使用和不使用 jQuery。诀窍是将该单元格的内容包装在一个 div 中，这样您就可以测量一些东西。

使用 jQuery:

var cellWidth = 1000;
var tableHeight = $('.c2').innerHeight();
var fontSize = parseInt(window.getComputedStyle($('.c2 span')[0]).fontSize, 10);

do {
	$('.c2').css('width', cellWidth+'px');
	cellWidth-=20;
}
while ( $('.c2 span').innerHeight() < tableHeight - fontSize);

$('.c2').css('width', $('.c2 span').width() );

.c2 {
padding: 0 8px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border=1 class=t>
  <tr>
    <td class=c1>alpha alpha alpha </td>
    <td class=c2 rowspan=3><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span></td>
    <td class=c3d>alpha</td>
  </tr>
  <tr>
    <td class=c1>beta beta beta </td>
    <td class=c3>beta</td>
  </tr>
  <tr>
    <td class=c1>gamma gamma gamma </td>
    <td class=c3>gamma</td>
  </tr>
</table>

纯 JS:

var cellWidth = 1000;
var theCell = document.querySelectorAll('.c2')[0];
var theSpan = document.querySelectorAll('.c2 div')[0];
var cellHeight = theCell.offsetHeight;

do {
	theCell.style.width = cellWidth+'px';
	cellWidth--;
}
while ( theSpan.offsetHeight < cellHeight);

<table border=1 class=t>
  <tr>
    <td class=c1>alpha alpha alpha </td>
    <td class=c2 rowspan=3><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit</div></td>
    <td class=c3d>alpha</td>
  </tr>
  <tr>
    <td class=c1>beta beta beta </td>
    <td class=c3>beta</td>
  </tr>
  <tr>
    <td class=c1>gamma gamma gamma </td>
    <td class=c3>gamma</td>
  </tr>
</table>

编辑:我在 jQuery 版本中添加了一行，以便在与 div 高度进行比较时从单元格高度中减去字体大小。

编辑:添加了额外的行(在 jQuery 版本中)以收紧间距，以及一些用于留出空间的填充。