宽度为100%且列宽随内容变化的CSS表格[已关闭]

dbf7pr2w 于 2023-05-08 发布在其他

关注(0)|答案(3)|浏览(161)

**关闭。**此题需要debugging details。目前不接受答复。

编辑问题以包含desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem。这将帮助其他人回答这个问题。
3天前关闭。
Improve this question
我想要一个总是100%宽度的表，但我希望列的宽度根据其内容而变化。即，较小的列收缩以给具有更多内容的列给予更多空间。
下面是一个例子，我想缩小第1、3和4列，以便第2列有更多的空间。
https://codepen.io/melonfacedoom/pen/ZEyRywL
下面是来自codepen的css：

.content-table {
    border-collapse: collapse;
    table-layout: fixed;
    width:100%;
}

.content-table th,
.content-table td {
    overflow: hidden;
    text-overflow: ellipsis;
}

css

来源：https://stackoverflow.com/questions/69273295/css-table-with-100-width-and-column-widths-that-vary-by-content

3条答案

按热度按时间

jhdbpxl91#

必须删除table-layout: fixed，因为它为所有子元素分配了相等的宽度。试试这个

body {max-width: 100%; overflow-x:hidden;}
.content-table {
    border-collapse: collapse;
    /*table-layout: fixed;*/
    width:100%;
}

.content-table th,
.content-table td {
    overflow: hidden;
    word-break:break-all;
    min-width: 7em;
    text-align: left;
}

<table class="content-table">
                <thead>
                    <tr>
                        <th>Example</th>
                        <th>Example</th>
                        <th>Example</th>
                        <th>Example</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Example</td>
                        <td>Example</td>
                        <td>Example</td>
                        <td>Example</td>
                    </tr>
                    <tr>
                        <td>Example</td>
                        <td>ExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</td>
                        <td>Example</td>
                        <td>Example</td>
                    </tr>
                    <tr>
                        <td>Example</td>
                        <td>Example</td>
                        <td>Example</td>
                        <td>Example</td>
                    </tr>
                    <tr>
                        <td>Example</td>
                        <td>Example</td>
                        <td>Example</td>
                        <td>Example</td>
                    </tr>
                    <tr>
                        <td>Example</td>
                        <td>Example</td>
                        <td>Example</td>
                        <td>Example</td>
                    </tr>
                </tbody>
            </table>

请确保添加word-break: break-all来打断单词，以便完全对齐。还可以考虑将min-width添加到th和td中，以避免大量压缩。
您修改的codepen
正如OP建议的那样，他希望将内容放在一行中，这里有一个解决方案。

body {max-width: 100%; overflow-x:hidden;}
.content-table {
    border-collapse: collapse;
    /*table-layout: fixed;*/
    width:100%;
}

.content-table th,
.content-table td {
    overflow: hidden;
    word-break:break-all;
    min-width: 7em;
    text-align: left;
}

.content-table td {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 35vw;}

<table class="content-table">
                <thead>
                    <tr>
                        <th>Example</th>
                        <th>Example</th>
                        <th>Example</th>
                        <th>Example</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Example</td>
                        <td>Example</td>
                        <td>Example</td>
                        <td>Example</td>
                    </tr>
                    <tr>
                        <td>Example</td>
                        <td>ExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</td>
                        <td>Example</td>
                        <td>Example</td>
                    </tr>
                    <tr>
                        <td>Example</td>
                        <td>Example</td>
                        <td>Example</td>
                        <td>Example</td>
                    </tr>
                    <tr>
                        <td>Example</td>
                        <td>Example</td>
                        <td>Example</td>
                        <td>Example</td>
                    </tr>
                    <tr>
                        <td>Example</td>
                        <td>Example</td>
                        <td>Example</td>
                        <td>Example</td>
                    </tr>
                </tbody>
            </table>

您所要做的就是为<td>元素添加max-width

赞(0）回复(0）举报 2023-05-08

368yc8dk2#

另一种保留text-overflow:ellipsis并避免table-layout:fixed;的可能性是切换到grid布局。
我的想法是

.content-table {
  display: grid;
  grid-template-columns: repeat(4, auto);
}

thead,
tbody,
tfoot,
tr {/* remove them virtually from the tree and make th/td direct child of table displayed as a grid */
  display: contents;
}

.content-table th,
.content-table td {
  overflow: hidden;
  text-overflow: ellipsis;
  padding:2px;/* makes it a bit easier to read */
}

/* demo purpose , to show where grid and cells stand */

.content-table:hover  {
  box-shadow:0 0 0 1px;
  gap: 1px;
  background: black;
}

.content-table:hover th,
.content-table:hover td {
  background: white;
  padding: 2px 1px 1px 2px;
}

<table class="content-table">
  <thead>
    <tr>
      <th>Example</th>
      <th>Example</th>
      <th>Example</th>
      <th>Example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Example</td>
      <td>Example</td>
      <td>Example</td>
      <td>Example</td>
    </tr>
    <tr>
      <td>Example</td>
      <td>ExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</td>
      <td>Example</td>
      <td>Example</td>
    </tr>
    <tr>
      <td>Example</td>
      <td>Example</td>
      <td>Example</td>
      <td>Example</td>
    </tr>
    <tr>
      <td>Example</td>
      <td>Example</td>
      <td>Example</td>
      <td>Example</td>
    </tr>
    <tr>
      <td>Example</td>
      <td>Example</td>
      <td>Example</td>
      <td>Example</td>
    </tr>
  </tbody>
</table>

赞(0）回复(0）举报 2023-05-08

p3rjfoxz3#

我找到了一个简单的解决办法。
像这样创建一个不可见的（高度=0）第一行。

<tr> <td colspan="9" style="width:100%vw; height:0px"></td></tr>

它使TABLE成为视口的全宽，其余的行按需要分布。

赞(0）回复(0）举报 2023-05-08

我来回答

宽度为100%且列宽随内容变化的CSS表格[已关闭]

3条答案

相关问题

热门标签

最新问答