Question

我有一张桌子，单元格接收动态内容。我希望所有单元格都具有相同的大小，但是无论如何尝试，我都无法让我的<xsl:template match="@* | node()" mode="add-marker"> <xsl:copy> <xsl:apply-templates select="@* | node()" mode="#current"/> </xsl:copy> </xsl:template>拥有更多的内容来停止变得更高，并使所有其他td变得更小。我有固定宽度和高度的tr，但仍然无法正常工作。

演示：

table-layout: fixed

table {
  table-layout: fixed;
  height: 100vh;
  width: 100vw;
  position: absolute;
  top: 0;
  left: 0;
}

td {
  border: 1px solid black;
  height: 30vh;
  width: 30vw;
  position: relative;
  overflow: hidden;
}

div {
  border: 1px solid blue;
  height: 30vh;
  width: 90%;
}

（不是精确的代码，而是正在发生的事情的表示）。任何帮助表示赞赏。

Answer 1

表是HTML和CSS中使用的一种古老技术，因此所有新的CSS功能均无法使用。试图在TD上设置最大高度，但是没有用。尽管您应该专注于TR而不是TD，因为您应该将TR设置为设定的高度，而不是其中的数据。

这是一项正在进行的工作：https://jsfiddle.net/a4ew9ft5/1/

tr {
  height: 30vh;
}

Answer 2

现在重新考虑我的答案，我注意到您的单元格中有两个div：如果您的td中的div数量未知，高度为30vh，则需要一个容器，例如：https://codepen.io/anon/pen/EdQpvb

对于包含您所拥有内容的30vh高元素，您需要添加设置为隐藏的溢出属性。然后将容器div元素设置为自动，它将作为您的td边界（这样您就可以滚动浏览这些元素，否则...看不到很多！）。

HTML

<table cellspacing="0">
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
  </tr>
  <tr>
    <td>a</td>
    <td>
      <div class="container">
      <div class="content">
        Donec nunc diam, imperdiet quis quam ac, varius placerat nisi. Praesent nec nunc vel nisl tristique sollicitudin. Cras ut nibh a arcu faucibus fringilla. Maecenas rhoncus ipsum sit amet libero auctor egestas. Suspendisse dapibus egestas augue quis laoreet. Ut sed lectus eu felis ullamcorper pulvinar ut a ante. Aliquam euismod ut massa vel laoreet. Proin nunc leo, pellentesque at nulla in, iaculis commodo nulla.
      </div>
      <div class="content">
        Sed eu libero vitae eros elementum vulputate. Proin finibus tincidunt lorem, a tempor nulla. Donec id metus eget velit consectetur bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla interdum mauris libero, ac tempor leo finibus ac. Donec scelerisque vel turpis ac tincidunt. Curabitur ac ex sit amet ex mattis ultrices.
      </div>
      </div>
    </td>
    <td>c</td>
  </tr>
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
  </tr>
</table>

CSS

table {
  table-layout: fixed;
  height: 100vh;
  width: 100vw;
  position: absolute;
  top: 0;
  left: 0;
}

td {
  border: 1px solid black;
  height: 30vh;
  width: 30vw;
  position: relative;
  overflow: hidden;
  vertical-align: top;
}

div.container{
  position: absolute;
  height: 100%;
  overflow-y: auto;
}

div.content {
  position: relative;
  border: 1px solid blue;
  height: 30vh;
  overflow: hidden;
}

Answer 3

您似乎正在尝试这样做。将div元素放置在具有绝对位置的容器中，然后使td元素的溢出滚动。

table {
  table-layout: fixed;
  height: 100vh;
  width: 100vw;
  position: absolute;
  top: 0;
  left: 0;
}

td {
  border: 1px solid black;
  height: 30vh;
  width: 30vw;
  position: relative;
  overflow: scroll;
}

.container{
  position: absolute;
}

.div1,
.div2 {
  position: relative;
  border: 1px solid blue;
  height: 30vh;
  width: 90%;
}

<table cellspacing="0">
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
  </tr>
  <tr>
    <td>a</td>
    <td>
      <div class="container">
        <div class="div1">
          abcdefg
        </div>
        <div class="div2">
          abcdefg
        </div>
      </div>
    </td>
    <td>c</td>
  </tr>
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
  </tr>
</table>

防止TD从内容上变得更高

3 个答案: