时间戳

首页 > 解决方案 > html表格中的等高表格单元格

html - html表格中的等高表格单元格

问题描述

我想要什么？

动态内容！必须可以向表的第 1 列和第 2 列添加任意数量的内容，并且结果必须仍然有效。固定高度不是解决方案。

使用 html 表格和 css：

在此处输入图像描述

所以在 prosa 中：内容必须是两个表格单元格的高度相等，并且不太完整的单元格的内容需要处于垂直极端。不太完整的单元格的内容是一个看起来像绿线的小 div 和文本。这些是 2 个单独的项目，我希望这 2 个项目在表格的两端对齐

代码笔： https ://codepen.io/jossnaz/pen/YBGEGb

table {
  width: 300px;
}

td {
  background-color: lightgray;
}

.separator {
  height: 1px;
  background-color: green;
  width: 50px;
  margin: auto;
}
<table>
  <tbody>
    <tr>
      <td>111111111111 <br> 111 <br> 111</td>
      <td>222 222 222 22222222
        <div class="separator"></div>
      </td>
    </tr>
  </tbody>
</table>

不知何故，表格单元格不允许我做我想做的事。

标签： htmlcsshtml-table

解决方案

控制内容的嵌套元素

和加强表行为

子表和子单元格

请记住，将任何数量的任何元素放在 a 中是有效且常见的做法<td>（如果您关心标准、语义等）。
每个元素<td>都有：

子表：<figure class="content">
使用display: table，这充当子表。因此，它控制它的子元素的文本换行、溢出以及从它派生的方面作为表格，子元素作为表格单元格的外部。它还控制桌子本身的高度，并通过符合自己的尺寸来稳定尺寸。

子单元格：<figcaption class='text'>
display: table-cell对单元格施加单元格行为，<figcaption>因此它会随着内容的增加而垂直扩展，并将其文本保持在其边界内。

各种各样的

  • vertical-align: top;ontd让内容占据每个单元格的顶部。
  • 有两种解决方案.separator。
    • 演示 1 <figure>的border-bottom颜色为绿色。虽然它肯定停留在底部，但我意识到它比原版长了 3 倍。
    • 演示 2 .separator的<hr>宽度为 50 像素。为了将其保持在底部，将其固定在<figure>.
  • 由于表格包含动态内容的重要性，我添加了一个事件处理程序，当按下某个ctrl键单击表格时触发该事件处理程序。用户单击的单元格变为可编辑的。在查看演示时，尝试用打破它的意图填满表格......打赌你不能

演示 1

细节在演示中得到了彻底的评论

// CTRL + Click to Edit Text 
/* 
|| - This is not required it is for demonstration purposes.
||   This is to simulate dynamic content. 
|| - Press the ctrl key + click with mouse/pointer device on 
||   either cell to edit the text.
*/
var table = document.querySelector('table');

table.onclick = edit;

function edit(e) {
  if (e.target.classList.contains('text') && e.ctrlKey) {
    if (!e.target.classList.contains('edit')) {
      e.target.contentEditable = true;
      e.target.classList.add('edit');
    } else {
      e.target.contentEditable = false;
      e.target.classList.remove('edit');
    }
  }
}
/*
|| - Collapsed borders and fixed layout gives us a degree control.
|| - 100% x 100% makes the tbody, tr, and to some extent td
||   stretch to their borders.
*/

table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 300px;
  height: 100%;
  border: 2px solid #000;
}


/*
|| - vertical-align: top aligns each of the cells' content to the
||   top.
*/

td {
  width: 150px;
  border: 1px solid grey;
  vertical-align: top;
}


/*
|| - This is a figure tag within each td. It stabilizes
||   dimensions of the td it's nested in by always being at 100% 
||   of the td height (not its own height). 
|| - Note it has display: table and fixed layout. having a nested
||   tabled within a real td gives us more control and less
||   unpredictable behavior.
|| - The word-* and overflow properties are applied here because
||   the figure is the buffer between the text of the figcaption
||   and the td that they all reside within.
|| - The .separator is actually the bottom border of the figure. 
||   This ensures that the green line is always at the bottom of
||   each cell. Note that the color of the line on the left is 
||   red. That was intentional in order to show that they were 
||   separate.
*/

.content {
  display: table;
  table-layout: fixed;
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  word-break: break-word;
  word-wrap: break-word;
  overflow-x: hidden;
  border-bottom: 0.5ex solid rgba(0, 200, 0, 0.75);
}


/*
|| - This is the figcaption nested within each figure. Having 
||   display:table-cell allows the figcaption to expand vertically
||   when the text increases.
|| - The padding is in ch units. Ch size is relative to the font.
||   I don't se the advantage IMO but as a rough equivalent to a 
||   character's width, ch seems to be the closest.
*/

.text {
  display: table-cell;
  padding: 1ch 0.75ch 1ch 1ch;
}


/*
|| This is the red line previously mentioned
*/

td:first-of-type figure {
  border-bottom: 0.5ex solid rgba(200, 0, 0, 0.9);
}


/*
|| - The remaining rule sets are for the demonstration they are
||   not required nor suggested.
*/

b {
  font-size: 15vh;
}

kbd {
  border: 2px outset grey;
  border-radius: 4px;
  padding: 2px 3px;
}
<table>
  <tr>
    <td>
      <figure class='content'>
        <figcaption class='text'>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </figcaption>
      </figure>
    </td>
    <td>
      <figure class='content'>
        <figcaption class='text'>
          commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
          <p style='color:green'>To edit text on either cell:</p>
          <p>PC: <kbd>ctrl</kbd></p>
          <p>or</p>
          <p>Mac: <kbd>&#8984;</kbd></p>
          <p><sup>&#10133;</sup> <b>&#128432;</b></p>
        </figcaption>
      </figure>
    </td>
  </tr>
</table>

演示 2

细节在演示中得到了彻底的评论 

// CTRL + Click to Edit Text 
/* 
|| - This is not required it is for demonstration purposes.
||   This is to simulate dynamic content. 
|| - Press the ctrl key + click with mouse/pointer device on 
||   either cell to edit the text.
*/
var table = document.querySelector('table');

table.onclick = edit;

function edit(e) {
  if (e.target.classList.contains('text') && e.ctrlKey) {
    if (!e.target.classList.contains('edit')) {
      e.target.contentEditable = true;
      e.target.classList.add('edit');
    } else {
      e.target.contentEditable = false;
      e.target.classList.remove('edit');
    }
  }
}
/*
|| - Collapsed borders and fixed layout gives us a degree control.
|| - 100% x 100% makes the tbody, tr, and to some extent td
||   stretch to their borders.
*/

table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 300px;
  height: 100%;
  border: 2px solid #000;
}


/*
|| - vertical-align: top aligns each of the cells' content to the
||   top.
*/

td {
  width: 150px;
  vertical-align: top;
  border: 1px solid grey;
}


/*
|| - This is a figure tag within each td. It stabilizes
||   dimensions of the td it's nested in by always being at 100% 
||   of the td height (not its own height). 
|| - Note it has display: table and fixed layout. having a nested
||   tabled within a real td gives us more control and less
||   unpredictable behavior.
|| - The word-* and overflow properties are applied here because
||   the figure is the buffer between the text of the figcaption
||   and the td that they all reside within.
|| - The .separator is a customized <hr>. 
||   To ensure that the green line is always at the bottom of
||   each cell. The <hr> is pinned underneath the figure then 
||   moved vertically up a little by a negative margin from
||   <figure>
*/

.content {
  display: table;
  table-layout: fixed;
  margin: 0 0 -1vh;
  padding: 0;
  width: 100%;
  min-height: 100%;
  word-break: break-word;
  word-wrap: break-word;
  overflow-x: hidden;
}


/*
|| - This is the figcaption nested within each figure. Having 
||   display:table-cell allows the figcaption to expand vertically
||   when the text increases.
|| - The padding is in ch units. Ch size is relative to the font.
||   I don't se the advantage IMO but as a rough equivalent to a 
||   character's width, ch seems to be the closest.
*/

.text {
  display: table-cell;
  padding: 1ch 0.75ch 1ch 1ch;
}


/*
|| This is the red line previously mentioned
*/

.separator {
  width: 50px;
  border-bottom: 0.5ex solid rgba(0, 200, 0, 0.75);
  margin: 0 auto;
}

td:first-of-type hr {
  border-bottom: 0.5ex solid rgba(200, 0, 0, 0.9);
}


/*
|| - The remaining rule sets are for the demonstration they are
||   not required nor suggested.
*/

b {
  font-size: 15vh;
}

kbd {
  border: 2px outset grey;
  border-radius: 4px;
  padding: 2px 3px;
}
<table>
  <tr>
    <td>
      <figure class='content'>
        <figcaption class='text'>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </figcaption>
      </figure>
      <hr class='separator'>
    </td>
    <td>
      <figure class='content'>
        <figcaption class='text'>
          commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
          <p style='color:green'>To edit text on a cell:</p>
          <p>PC: <kbd>ctrl</kbd></p>
          <p>or</p>
          <p>Mac: <kbd>&#8984;</kbd></p>
          <p><sup>&#10133;</sup> <b>&#128432;</b></p>
        </figcaption>
      </figure>
      <hr class='separator'>
    </td>
  </tr>
</table>

推荐阅读