具有第二列动态宽度和省略号的固定宽度表

卢卡斯

我需要只有两行的两列表。第一列中的数据应始终显示为完整,但第二列应调整大小,并且如果其中的数据不能容纳在单元格中,则该数据应为椭圆形。如果第一列扩展以适合其数据,则第二列应收缩,同时保持表宽度相同。

我试图固定表格的宽度以及使用CSS来实现此目的的各种方式,但我不知道。看来这应该是可以实现的。

这是表在第一列中使用不同数据的方式:

在此处输入图片说明

在此处输入图片说明

.ellipsis {
  width: 190px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}
<h3>table width always the same</h3>
<table border="1">
  <tr>
    <th>
      Column1
    </th>
    <th>
      Column2
    </th>
  </tr>
  <tr>
    <td>
      <label>Display in full</label>
    </td>
    <td>
      <label class="ellipsis">Ellipsis this if length is too long</label>
    </td>
  </tr>
</table>

莫什·费

就像我在评论中提到的,可以使用实现flex-box

  • .parent 具有 display: flexbox
  • 第1列white-space: nowrap必须使其适合其内容。
  • 第2列具有flex-grow所有剩余空间。

.parent {
  display: flex;
  width: 350px;
  border: 1px solid;
}

.header {
  text-align: center;
  font-weight: bold;
  border-bottom: 1px solid;
}

.parent > div:first-child {
  white-space: nowrap;
  border-right: 1px solid;
}

.parent > div:last-child {
  flex-grow: 1;
}

.parent div:last-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.parent > div > div {
  padding: 1px;
}
<div class="parent">
  <div>
    <div class="header">Column1</div>
    <div>Display in full</div>
  </div>
  <div>
    <div class="header">Column 2</div>
    <div>Ellipsis this if length is too long</div>
  </div>
</div>

https://jsbin.com/ferixiq/3/edit?html,css,输出

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何将UIScrollView内容大小配置为具有固定宽度和动态高度?

来自分类Dev

PocketGrid:具有固定宽度的导航列的网格布局

来自分类Dev

如果发生溢出,如何设置UITextView的最大高度和固定宽度并强制省略号而不是滚动?

来自分类Dev

动态和固定宽度的CSS

来自分类Dev

CSS文字省略号和100%宽度

来自分类Dev

读取具有固定宽度和缺失值的表格数据

来自分类Dev

带有省略号的动态文本旁边的滑动图标

来自分类Dev

CSS文字溢出省略号+以%表示的宽度无效

来自分类Dev

具有100%宽度和固定高度的背景视频

来自分类Dev

具有响应表宽度的HTML表固定标题

来自分类Dev

具有固定宽度和流体含量的CSS边栏

来自分类Dev

带省略号的浮动div的CSS-宽度未知

来自分类Dev

如何使省略号在具有动态宽度(flex:1)的flex项目上工作?

来自分类Dev

截断省略号,不带宽度

来自分类Dev

HTML表具有固定的页眉和页脚以及可滚动的正文,没有固定的宽度

来自分类Dev

CSS div自动调整大小到内容,带有最大宽度和省略号文本

来自分类Dev

某些列具有固定宽度的CSS网格

来自分类Dev

如何固定第二行第二列和其他列的CSS网格宽度

来自分类Dev

相等但动态大小的列,带有省略号

来自分类Dev

将对象数组输出为终端,作为具有固定宽度列中的属性的表

来自分类Dev

CSS文字溢出:省略号不取决于宽度

来自分类Dev

具有可变宽度,固定宽度和剩余宽度的HTML表

来自分类Dev

具有固定宽度和流体含量的CSS边栏

来自分类Dev

带省略号的浮动div的CSS-宽度未知

来自分类Dev

具有第二个固定宽度和第一个填充宽度的2个项目的水平列表

来自分类Dev

以“ 100%”宽度div显示省略号

来自分类Dev

省略号以限制离子的文本高度和宽度

来自分类Dev

如何在Angular中使用省略号和标签实现(动态宽度)文本输入?

来自分类Dev

MS Outlook具有固定宽度和可变宽度的表

Related 相关文章

  1. 1

    如何将UIScrollView内容大小配置为具有固定宽度和动态高度?

  2. 2

    PocketGrid:具有固定宽度的导航列的网格布局

  3. 3

    如果发生溢出,如何设置UITextView的最大高度和固定宽度并强制省略号而不是滚动?

  4. 4

    动态和固定宽度的CSS

  5. 5

    CSS文字省略号和100%宽度

  6. 6

    读取具有固定宽度和缺失值的表格数据

  7. 7

    带有省略号的动态文本旁边的滑动图标

  8. 8

    CSS文字溢出省略号+以%表示的宽度无效

  9. 9

    具有100%宽度和固定高度的背景视频

  10. 10

    具有响应表宽度的HTML表固定标题

  11. 11

    具有固定宽度和流体含量的CSS边栏

  12. 12

    带省略号的浮动div的CSS-宽度未知

  13. 13

    如何使省略号在具有动态宽度(flex:1)的flex项目上工作?

  14. 14

    截断省略号,不带宽度

  15. 15

    HTML表具有固定的页眉和页脚以及可滚动的正文,没有固定的宽度

  16. 16

    CSS div自动调整大小到内容,带有最大宽度和省略号文本

  17. 17

    某些列具有固定宽度的CSS网格

  18. 18

    如何固定第二行第二列和其他列的CSS网格宽度

  19. 19

    相等但动态大小的列,带有省略号

  20. 20

    将对象数组输出为终端,作为具有固定宽度列中的属性的表

  21. 21

    CSS文字溢出:省略号不取决于宽度

  22. 22

    具有可变宽度,固定宽度和剩余宽度的HTML表

  23. 23

    具有固定宽度和流体含量的CSS边栏

  24. 24

    带省略号的浮动div的CSS-宽度未知

  25. 25

    具有第二个固定宽度和第一个填充宽度的2个项目的水平列表

  26. 26

    以“ 100%”宽度div显示省略号

  27. 27

    省略号以限制离子的文本高度和宽度

  28. 28

    如何在Angular中使用省略号和标签实现(动态宽度)文本输入?

  29. 29

    MS Outlook具有固定宽度和可变宽度的表

热门标签

归档