如何防止带colspan的表格行在内容太长时弄乱其他列的自动大小

问题描述 投票：0回答：1

我有一个相对简单的 html 表格，其中的行可以通过单击来切换其下方行的显示（用于显示上方行的更多详细信息）。

单击时显示/隐藏的“详细信息”行设置了 

colspan
值，以便单个 
td
跨越所有列。

桌子始终占据 100% 的可用水平空间。

我面临一个我不明白的问题：当“详细”行内容溢出多行时，它会触发所有列的宽度发生变化！

<html>
   <head>
      <title>asdf</title>
   </head>
   <body>
   <table>
      <thead>
         <tr>
            <th>AAA</th>
            <th>BBB</th>
            <th>CCC</th>
            <th>DDD</th>
            <th>EEE</th>
         </tr>
      </thead>
      <tbody>
         <tr onclick="document.getElementById('detail').hidden = !document.getElementById('detail').hidden" style="background-color:red">
            <td>asdfa</td>
            <td>dhfdh dfhd hfdfdh  fdh dhdhd</td>
            <td></td>
            <td></td>
            <td></td>
         </tr>
         <tr id="detail">
            <td colspan="5">
                ssssssss ssssssssssss ssssssssssssssssssss ssssssssssss sssssssssssss ssssssssssssss ssssssssssssssss sssssssssssssssssssss ssssssssss ssssssssssssssssss sssssssssssssssssssss sssssssssssssss sssssssss ssssssssssssss sssssssssss ssssssssssssssssssssssss ssssssssss ssssss ssssssssssssssssssssssss sssssssssss ssssssssssss sssssssssssssss ssssssssssssssss sssssssssssssssss sssssssssssssssss ssssssss sssssssssssss sssssssssssss ssssssssssssssssssss sssssssssssssssssssssssss sssssssssssssssssss ssssssss ssssssssssss ssssssssss ssssssssssssss sssssssssssssssssssss ssssssssss ssssssssssssssss sssssssssssss sssssssssssssssssssss ssssssssssssssss sssssssssssssssss sssssssssss sssssssssssssss ssssssssssss
            </td>
         </tr>
         <tr>
            <td>asdfasdf</td>
            <td>dgfhdh sdgdfdh</td>
            <td></td>
            <td></td>
            <td></td>
         </tr>
      </tbody>
   </table>
   </body>
</html>

https://jsfiddle.net/93dpowb5/（点击红行可切换“详细信息”行的显示）

我设法在 jsfiddle 中重现了这个问题。 （在 Firefox 和 Chrome 上测试）

我注意到在“详细信息”行上设置 

max-width
可以解决问题（列宽保持不变），但我想避免这样做，以便可以正常调整窗口大小。

我知道

table-layout: fixed
，但我希望我的列能够动态调整大小。我只是希望它们在计算布局后保持相同的宽度！

基本上，我正在寻找一种尽可能非黑客的方法来使所有内容动态调整大小，同时避免在“详细信息”行显示时跳动列......

html css html-table row
1个回答
0
投票

将 

div
隐藏在 
tr
中：

body {
  overflow: scroll; /* just prevent jump */
}

table {
  width: 100%;
}

.hidden td {
  padding-top: 0;
  padding-bottom: 0;
}

.hidden div {
  height: 0;
  overflow: hidden;
}
<table>
  <thead>
    <tr>
      <th>AAA</th>
      <th>BBB</th>
      <th>CCC</th>
      <th>DDD</th>
      <th>EEE</th>
    </tr>
  </thead>
  <tbody>
    <tr onclick="detail.classList.toggle('hidden')" style="background-color:red">
      <td>asdfa</td>
      <td>dhfdh dfhd hfdfdh  fdh dhdhd</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr id="detail">
      <td colspan="5">
        <div>ssssssss ssssssssssss ssssssssssssssssssss ssssssssssss sssssssssssss ssssssssssssss ssssssssssssssss sssssssssssssssssssss ssssssssss ssssssssssssssssss sssssssssssssssssssss sssssssssssssss sssssssss ssssssssssssss sssssssssss ssssssssssssssssssssssss ssssssssss ssssss ssssssssssssssssssssssss sssssssssss ssssssssssss sssssssssssssss ssssssssssssssss sssssssssssssssss sssssssssssssssss ssssssss sssssssssssss sssssssssssss ssssssssssssssssssss sssssssssssssssssssssssss sssssssssssssssssss ssssssss ssssssssssss ssssssssss ssssssssssssss sssssssssssssssssssss ssssssssss ssssssssssssssss sssssssssssss sssssssssssssssssssss ssssssssssssssss sssssssssssssssss sssssssssss sssssssssssssss ssssssssssss</div>
      </td>
      </tr>
      <tr>
      <td>asdfasdf</td>
      <td>dgfhdh sdgdfdh</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.