具有第一列最小宽度的响应表；第二列拉伸；第三列总是在最后；我怎样才能做到这一点？

Question

我需要一个 html 表格

下面的模型显示了应该涵盖哪些情况。

1. 表格不应溢出屏幕，即使在小型设备上（移动支持）
2. 第一行应尽可能小（宽度）； smalles 宽度是其中最大元素的宽度
3. 第二列应覆盖其余空间
4. 第三列应始终位于末尾，并且应尽可能小（与第一列一样）
5. 行高应该是动态的
6. 一行的所有单元格应该在一行/应该有相同的高度

我已经用flex 和table 试过了

• table 我遇到的问题是第二列没有响应（固定表格）或溢出屏幕，因为第二列的内容太大并且没有中断或缩小
• flexbox 我没有得到相同的第一列，即使宽度不同，内容长度也不同

一些特价商品

• 第一列应该包含时间，问题是3:00 和10:00 的宽度不同，我不想要静态宽度，因为那样会浪费空间或者对于其他语言环境来说太小了李>
• 第二列应包含项目（div（称为芯片的自定义组件）），如果它们知道最大宽度，则可以缩小和破坏
• 第三列用于操作 - 总是在第二列有足够空间的情况下，宽度尽可能小

2020 年 15 月 1 日编辑

第二列中的元素不应中断，表格不应在移动视图上滚动。 否则第二列中的所有项目都应该被截断。

我已经找到了解决方案（如下），但如果有人在没有网格的情况下得到相同的结果 - 不客气！

Answer 1

如果我理解正确，你可以试试这个：

<table class='table'>
  <thead>
    <th class='time'>time</th>
    <th class='text'>information</th>
    <th class='actions'>actions</th>
  </thead>
  <tbody>
    <tr>
      <td>04:00</td>
      <td>
          <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer blandit consequat dui, id lacinia est. Integer blandit, felis nec condimentum ornare, ex diam cursus leo, id rutrum dolor nibh vel libero. Integer ut augue semper, convallis libero id, finibus ipsum. Cras nec metus bibendum, dictum mi ut, ullamcorper lectus.           </span>
      </td>
      <td>
        <button>Action</button>
      </td>
    </tr>
  </tbody>
</table>


.table
  text-align: left
  width: 100%
  .time 
    min-width: 30px
    max-width: 50px
  .actions
    min-width: 80px //This value is a example

您可以测试：https://codepen.io/AlissonRGalindo/pen/VwYdMRm

Answer 2

您还可以使用表格方法，而不会失去响应性，并且即使未指定宽度，第二列也会拉伸。

在我的代码中，表格延伸到其父级（即主体）的 100%。确保您的表的父级将具有定义的宽度。

<table cellspacing="0">
  <tr>
    <th>Time column</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr> 
  <tr>
   <td>3:00</td>
    <td>Longer text for a longer column</td>
    <td><input type="checkbox"></td>
  </tr>
  <tr>
    <td>11:00</td>
    <td>Longer text for a longer column</br>and a row break</td>
    <td><input type="checkbox"></td>
  </tr>
  <tr>
   <td>06:00</td>
    <td><div>Here's a div containing a <span style="color: red;">span</span></div></td>
    <td><input type="checkbox"></td>
  </tr>
</table>

table, td, th {
  border: 1px solid white;
  background: orange;
}

table {
  width: 100%;
}

tr td:first-of-type, tr td:last-of-type { 
  width: 1px;
  text-align: center;
}

这个codePen也有样式，你可以通过调整窗口大小来测试表格的响应能力：https://codepen.io/ialexandru/pen/mdyKqRX

Answer 3

此 html 和 css 将符合您的要求。请注意，表周围的父 div 是必需的。

更新

• 您可以在 https://jsfiddle.net/uwpLrd1e/ 上找到 JSFiddle
• <th> 默认将文本居中。使用text-align:left 将其左对齐。
• 根据需要添加内边距、颜色和边框。
• 请使用内边距（不是边距），因为边距会超出宽度。

.

<div class="table-wrapper">
  <table>
    <tbody>
      <tr>
        <td>23:59</td>
        <td>Second column</td>
        <td>[]</td>
      </tr>
      <tr>
        <td>1:11</td>
        <td>Column 2 on row 2</td>
        <td>[X]</td>
      </tr>
    </tbody>
  </table>
</div>

/* table wrapper is required!! */
.table-wrapper {
  max-width: 100%;
}
.table-wrapper,
.table-wrapper * {
  box-sizing: border-box;
}
table, thead, tbody, tr {
  width: 100%;
}
table {
  max-width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  background-color: transparent;
}
th, td {
  vertical-align: top;
  border-left: 1px solid #ccc;
  line-height: 1;
  hyphens: auto;
  white-space: normal;
}
th:first-child,
td:first-child {
  border-left: 0;
}
/* stretch middle column (of three columns) */
th:nth-child(2),
td:nth-child(2) {
  width: 99.99%;
}
/* mobile support */
@media (max-width: 767.9px) {
  table {
    display: block;
    border: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
  th, td {
    font-size: 95%;
  }
}

Answer 4

您还可以将table-layout 设置为auto（默认值）并将width 设置为0 用于第一个和最后一个td，因此它只会扩展到其所需的宽度内容。中间的td 将跨越整个剩余空间。 它需要为表设置一个width。

例子

table {
  width: 100%;
  border: solid 1px;
  table-layout:auto;
}

th,td {
  border: solid 1px;
  padding: 0.25em
}

tr > :first-child,
tr > :last-child {
  width: 0 ; /* !! make sure table-layout is set to auto */
  /* white-space : nowrap; could be handy here */
}

<table>
  <tr>
    <td><input value="input"></td>
    <td> use room left</td>
    <td><input type="checkbox"></td>
  </tr>
</table>
<hr>
<table>
  <tr>
    <th>A.1</th>
    <td> use room left</td>
    <td>(....)</td>
  </tr>
  <tr>
    <th>A.2</th>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <th>A.3</th>
    <td> use room left</td>
    <td>( / )</td>
  </tr>
</table>
<hr>
<p>to clear some question via a visual: </p>

<table>
  <tr>    
    <td>What if only 2 cells </td>
    <td> </td>
  </tr>
</table>
<hr>

<table>
  <tr>  
    <td> </td>  
    <td>What if only 2 cells </td>
  </tr>
</table>
<hr>

<table>
  <tr>    
    <td>What if only 1 cell</td>
  </tr>
</table>

https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

table-layout CSS 属性设置用于布置<table> 单元格、行和列的算法。

自动

默认情况下，大多数浏览器使用自动表格布局算法。 调整表格及其单元格的宽度以适应内容。

Answer 5

最终解决方案：

CSS 网格（93.43% 支持）

.flex {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}

.item {
    margin-right: .6em;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.my-grid {
    display: grid;
    grid-template-columns: max-content auto max-content;
    grid-gap: .6rem;
}

<div class="my-grid">

    <!-- first row -->
    <span>first column</span>
    <div class="flex">
        <div class="item">some div with very looooong content that truncate</div>
        <div class="item">some div with very looooong content that truncate</div>
    </div>
    <div>here some actions</div>

    <!-- second row -->
    <span>first column</span>
    <div class="flex">
        <div class="item">some div with very looooong content that truncate</div>
        <div class="item">some div with very looooong content that truncate</div>
    </div>
    <div>here some actions</div>

</div