jquery - 表头最大高度，不够横向展开

Question

我有一个包含任意列数和任意标题的表格。

我想设置页眉的最大高度。 如果高度不足以容纳文本，我希望单元格水平拉伸(stretch)，并可能水平滚动整个表格。

需要 CSS 和/或 javascript (JQuery) 解决方案。

在下图中，我对 1. 和 2. 很满意，对 3. 或 4 不满意.，如果下划线是空格并且没有手动放置，那么 5. 会很高兴。

.overflow-x {
  overflow-x: auto;
  overflow-y: hidden;
}

td {
  padding: 10px;
  border: 1px solid black;
  line-height: 20px;
}

td>div {
  max-height: 40px;
}

<div style="width:300px; background-color:#fde; padding:10px">

  <ol>
    <li>

      <div class="overflow-x">
        <table>
          <tr>
            <td>quick</td>
            <td>brown</td>
            <td>fox</td>
          </tr>
        </table>
      </div>

    </li>
    <li>

      <div class="overflow-x">
        <table>
          <tr>
            <td>the quick brown fox</td>
            <td>jumps over</td>
            <td>the lazy dog</td>
          </tr>
        </table>
      </div>

    </li>
    <li>

      <div class="overflow-x">
        <table>
          <tr>
            <td>the quick brown fox jumps over the lazy dog</td>
            <td>the quick brown fox jumps over the lazy dog</td>
            <td>the quick brown fox jumps over the lazy dog</td>
          </tr>
        </table>
      </div>

    </li>
    <li>

      <div class="overflow-x">
        <table>
          <tr>
            <td>
              <div>the quick brown fox jumps over the lazy dog</div>
            </td>
            <td>
              <div>the quick brown fox jumps over the lazy dog</div>
            </td>
            <td>
              <div>the quick brown fox jumps over the lazy dog</div>
            </td>
          </tr>
        </table>
      </div>

    </li>
    <li>

      <div class="overflow-x">
        <table>
          <tr>
            <td>the_quick_brown_fox jumps_over_the_lazy_dog</td>
            <td>the_quick_brown_fox jumps_over_the_lazy_dog</td>
            <td>the_quick_brown_fox jumps_over_the_lazy_dog</td>
          </tr>
        </table>
      </div>

    </li>
  </ol>

</div>

Answer 1

试试这个。如果页面上只有一个表，可以简化 JS，但我通过 .each 运行它以确保每个表都是独立管理的。这种渐进的事情显然不是最好的性能明智的，但也许你的方法可以处理。

一个问题是我认为文本的行高必须在这种方法中定义。你已经在你的 CSS 中得到了它，但这使得它成为非可选的，否则你需要以其他方式定义最大高度的像素值，因为这种方法不是试图解析文本的行数正在突破，它只是查看第一行 tr 的高度(如果您使用 <thead> 或 <th> ，则可以进行另一种简化。

$('.overflow-x').each(function() {
  var maxHeight = 2*parseInt($(this).find('tr:first td').css('line-height'));
  var initWidth = $(this).width();
  for (i = initWidth; i < 1000; i++) {
    var height = $(this).find('tr:first td').height();
    if (height <= maxHeight) { break; }
    $(this).find('table').width(i + 1);
  }
})

.overflow-x {
  overflow-x: scroll;
}
td {
  padding: 10px;
  border: 1px solid black;
  line-height: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width:300px; background-color:#fde; padding:10px">
  <ol>
    <li>
      <div class="overflow-x">
        <table>
          <tr>
            <td>quick</td>
            <td>brown</td>
            <td>fox</td>
          </tr>
        </table>
      </div>
    </li>
    <li>
      <div class="overflow-x">
        <table>
          <tr>
            <td>the quick brown fox</td>
            <td>jumps over</td>
            <td>the lazy dog</td>
          </tr>
        </table>
      </div>
    </li>
    <li>
      <div class="overflow-x">
        <table>
          <tr>
            <td>the quick brown fox jumps over the lazy dog</td>
            <td>the quick brown fox jumps over the lazy dog</td>
            <td>the quick brown fox jumps over the lazy dog</td>
          </tr>
        </table>
      </div>
    </li>
    <li>
      <div class="overflow-x">
        <table>
          <tr>
            <td>
              <div>
                the quick brown fox jumps over the lazy dog
              </div>
            </td>
            <td>
              <div>
                the quick brown fox jumps over the lazy dog
              </div>
            </td>
            <td>
              <div>
                the quick brown fox jumps over the lazy dog
              </div>
            </td>
          </tr>
        </table>
      </div>
    </li>
    <li>
      <div class="overflow-x">
        <table>
          <tr>
            <td>the_quick_brown_fox jumps_over_the_lazy_dog</td>
            <td>the_quick_brown_fox jumps_over_the_lazy_dog</td>
            <td>the_quick_brown_fox jumps_over_the_lazy_dog</td>
          </tr>
        </table>
      </div>
    </li>
  </ol>
</div>