Question

我在包装器div中有一个表，设置为在溢出时滚动（即overflow: auto;）。

当放置在具有固定宽度的容器div中时，这很有效。如果我的表（正在构建服务器端）碰巧有很多列并且变得太宽，则在底部放置一个滚动条，使其成为半移动友好的。

<div class="container">
  <div class="wrapper">
    <table>
      <!-- more html here... -->
    </table>
  </div>
</div>

.container {
  width: 350px;
}

.wrapper {
  width: 100%;
  overflow: auto;
}

table {
  width: 100%;
}

但是，当我有一个包含大量文本的单元格时，单元格的高度通常会增加以适应内容。

由于我使用滚动溢出，我希望细胞的宽度增加更多，这样可以提高视觉吸引力。

我有一个jsfiddle显示一些例子：https://jsfiddle.net/romellem/vbcmgbx3/

在底部，我手动扩展了包含大量文本的单元格的宽度，以便显示我想要发生的事情（当然，没有手动修复）。

基本上，我正在寻找的是当一个单元格有大量文本，该单元格具有最大高度，以及单元格是否水平扩展（而不是垂直扩展））以适应内容。

Answer 1

您可以使用

将单元格内容包装在非表格容器中

width: max-content;     /* Attempt to have maximum width required by content */
max-width: 400px;       /* without exceeding 400px */
min-width: min-content; /* unless the content really requires it (optional) */

将来可以将其写为

width: fit-content(400px);

请注意，并非所有浏览器都支持max-content或min-content，其他浏览器需要供应商前缀。

.container {
  width: 350px;
}

.wrapper {
  width: 100%;
  overflow: auto;
}

table {
  width: 100%;
}

/* Manual fix for cell with lots of text */
.manual-fix {
  width: 400px;
}

/* minor display stuff */

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

h1 {
  font-size: 1.2em;
}

h2 {
  font-size: 0.9em;
  font-weight: normal;
  font-style: italic;
}

table tr td {
  border: 1px solid grey;
  padding: 0.5em;
}

table tr th {
  background-color: grey;
  color: white;
  padding: 0.3em;
}

body {
  font-family: sans-serif;
}

td > div {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  max-width: 400px;
  min-width: -webkit-min-content;
  min-width: -moz-min-content;
  min-width: min-content;
}

<h1>
  Table within a wrapper so it overflows nicely and you can scroll.
</h1>
<div class="container">
  <div class="wrapper">
    <table>
      <thead>
        <tr>
          <th><div>1</div></th>
          <th><div>2</div></th>
          <th><div>3</div></th>
          <th><div><div>4</div></th>
          <th>5</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><div>lorem</div></td>
          <td><div>ipsum</div></td>
          <td><div>dolorcing</div></td>
          <td><div>sit</div></td>
          <td><div>amet</div></td>
        </tr>
        <tr>
          <td><div>ipsum</div></td>
          <td><div>dolorcing</div></td>
          <td><div>sit</div></td>
          <td><div>amet</div></td>
          <td><div>lorem</div></td>
        </tr>
        <tr>
          <td><div>dolorcing</div></td>
          <td><div>sit</div></td>
          <td><div>amet</div></td>
          <td><div>lorem</div></td>
          <td><div>ipsum</div></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<h1>
  Table still within a wrapper yet coincidentally fits without the need for a scrolling overflow.
</h1>

<h2>
  This is only because it has a small number of columns.
</h2>
<div class="container">
  <div class="wrapper">
    <table>
      <thead>
        <tr>
          <th><div>1</div></th>
          <th><div>2</div></th>
          <th><div>3</div></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><div>lorem</div></td>
          <td><div>ipsum</div></td>
          <td><div>dolorcing</div></td>
        </tr>
        <tr>
          <td><div>ipsum</div></td>
          <td><div>dolorcing</div></td>
          <td><div>sit</div></td>
        </tr>
        <tr>
          <td><div>dolorcing</div></td>
          <td><div>sit</div></td>
          <td><div>amet</div></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<hr>

<h1>
  Table that still overflows, and wraps long text nicely.
</h1>
<div class="container">
  <div class="wrapper">
    <table>
      <thead>
        <tr>
          <th><div>1</div></th>
          <th><div>2</div></th>
          <th><div>3</div></th>
          <th><div>4</div></th>
          <th><div>5</div></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><div>lorem</div></td>
          <td><div>ipsum</div></td>
          <td><div>dolorcing</div></td>
          <td><div>sit</div></td>
          <td><div>amet</div></td>
        </tr>
        <tr>
          <td><div>ipsum</div></td>
          <td><div>dolorcing</div></td>
          <td><div>sit</div></td>
          <td><div>amet</div></td>
          <td><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div></td>
        </tr>
        <tr>
          <td><div>dolorcing</div></td>
          <td><div>sit</div></td>
          <td><div>amet</div></td>
          <td><div>lorem</div></td>
          <td><div>ipsum</div></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Answer 2

将position:relative;添加到.container类

请在此处找到工作示例。 Pen

Answer 3

细胞柱在固定宽度表上不会变宽。给包装器提供了很大的空间供桌子使用。然后使用javascript（我使用jQuery），调整包装宽度以适应表格的宽度。

<强> CSS

.container {
   width: 350px;
   overflow:auto;
}

.wrapper {
  width: 10000px;
}

table { 
}
table td:nth-child(5) {
  max-width:400px;
}

<强>的jQuery

$(document).ready(function() {
  $('table').each(function() {
    $(this).closest('.wrapper').width($(this).outerWidth());
  })
})

此处the fiddle。

当细胞含量很大时，表格细胞会水平生长

3 个答案: