响应式表中的响应式第一列答案

【问题标题】：Responsive First Column in a Responsive Table响应式表中的响应式第一列
【发布时间】：2019-01-20 19:08:36
【问题描述】：

六列表格的第一列填充了各种长度的内容。我想让它只响应一行，被溢出隐藏和省略号切割，同时保持表格在移动视口中仍然响应，宽度为 100%。

我的代码：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table {
    max-width: 100%;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    border: 1px solid #ddd;    
}
th, td {
    text-align: left;
    padding: 8px;
}
td {
    width: 50%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 10px;
}
tr:nth-child(even){background-color: #f2f2f2}
</style>
</head>
<body>
<h2>Responsive Table</h2>
<div style="width: 100%;">
  <table>
    <tr>
      <th>Content</th>
      <th>Name</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
    </tr>
    <tr>
      <td>around the table, and it will display a horizontal scroll bar when needed</td>
      <td>Smith</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve Resize the browser window to see the effect. Try to remove the div element and see what happens to the table</td>
      <td>Mike</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
    </tr>
    <tr>
      <td>Adam that is too wide, you can add a container element with overflow-x:auto around the table</td>
      <td>Johnson</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
    </tr>
  </table>
</div>
</body>
</html>

上面的代码使表格变得没有响应，并且未能按预期调整第一列的大小。

jsfiddle

非常感谢任何帮助。

【问题讨论】：

标签： html css html-table responsive-design whitespace

【解决方案1】：

秘密在于display: block；省略号仅适用于块级元素。因此，您需要将以下规则添加到相关的 <td> 元素中：

display: block;
width: 100px; /* However wide you want the cell to be before ellipsis */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

这应该只应用于每行中的第一个<td> 元素，因此您可以使用选择器td:first-of-type。

这可以在下面看到：

table {
  max-width: 100%;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid #ddd;
}

th,
td {
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #f2f2f2
}

td:first-of-type {
  display: block;
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<h2>Responsive Table</h2>
<div style="width: 100%;">
  <table>
    <tr>
      <th>Content</th>
      <th>Name</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
    </tr>
    <tr>
      <td class="ellipsis">around the table, and it will display a horizontal scroll bar when needed</td>
      <td>Smith</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve Resize the browser window to see the effect. Try to remove the div element and see what happens to the table</td>
      <td>Mike</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
    </tr>
    <tr>
      <td>Adam that is too wide, you can add a container element with overflow-x:auto around the table</td>
      <td>Johnson</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
    </tr>
  </table>
</div>

请注意，您需要使用基于像素的单位而不是百分比，因为使用百分比省略号将生效，但单元格本身仍将占据宽度的100%。

【讨论】：

如果我为第一个 td 设置了固定宽度，则 td 在更宽的视口中将变得不响应。我的期望是第一个 td 也可以跟随屏幕宽度。

【解决方案2】：

将下面的样式类单独应用到表格单元格应该会使文本剪辑。

<style>
 .clipText{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
 }
 .clipText:hover{
  white-space: pre-wrap;
  overflow: visible;
  text-overflow: normal;
  word-break: break-all;
 }
</style>

如果您尝试制作响应式表格，请使用 css 媒体查询并将表格元素显示为小屏幕的块并按照您认为合适的方式排列它们，并且一点 js dom 操作也可以更好地使用屏幕尺寸作为条件。

      <style type="text/css">
        @media screen and (max-width: 520px){
            table, th, tr, td{
                display: block;
            }
            table tr:first-child{
                display: none;
            }
            table tr:nth-child(even){
                background-color: royalblue;
                position: relative;
                margin: 2% 0%;
            }
            table tr:nth-child(odd){
                background-color: grey;
                position: relative;
                margin: 2% 0%;
            }
            table tr:nth-child(even) td{
                color: white;
                font-weight: bolder;
            }
            table tr:nth-child(odd) td{
                color: black;
                font-weight: bolder;
            }
            table td:nth-child(1)::before{
                content: "Content: ";
            }
            table td:nth-child(2)::before{
                content: "Name: ";
            }
            table td:nth-child(3)::before{
                content: "Points: ";
            }
            table td:nth-child(4)::before{
                content: "Points: ";
            }
            table td:nth-child(5)::before{
                content: "Points: ";
            }
            table td:nth-child(6)::before{
                content: "Points: ";
            }
            table td:nth-child(7)::before{
                content: "Points: ";
            }
        }
    </style>

查看上述样式的效果，缩小/最小化您的浏览器尺寸/宽度。

【讨论】：

@DrunkenM 两个代码都可以正常工作，首先你必须将它作为一个类添加到你想要对<td class="clipText">i am a content<td> 产生影响的 td 元素中，其次你所要做的就是减少浏览器或视图屏幕的大小
@DrunkenM 通过减小大小我的意思是尝试从左到右拖动浏览器窗口窗体，就好像让它变小一样，甚至可以在 js 小提琴中拖动小屏幕，表格显示在底部左角从左到右这就是media queries 的工作方式:) 它是由屏幕尺寸触发的

【解决方案3】：

我终于想出了如何解决这个问题。

秘诀是在 TD 中创建包含省略号文本的 2 个不同位置。这可以通过在 TD 中使用 position:absolute 添加新的 span 元素来完成，而 TD 本身使用 position:relative。

步骤：

使用 white-space:nowrap;
使用 width:100% 和 position:relative
使用 position:absolute; overflow: hidden; text-overflow: ellipsis; 为 TD 内的 span 元素设置样式强>左：0； 右：0；

我的工作解决方案的完整代码：

html, body {
  margin: 0;
  padding: 0;
  font-family: sans-serif; */
}
table {
	max-width: 100%;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    border: 1px solid #ddd;  
	display: table;
	table-layout: auto;	
}
th, td {
    text-align: left;
    padding: 8px;
}
td {
    white-space: nowrap;
    margin-bottom: 10px;	
}
td:nth-child(1) {
  width: 100%;
  position: relative;
}
td:nth-child(1):not(:empty)::after {
  /* Prevent row from collapsing vertically if the first column is empty */
  content: '';
  display: inline-block;
}
td:nth-child(1) > span {
  position: absolute;
  left: 0;
  right: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
tr:nth-child(even){background-color: #f2f2f2}

<h2>Responsive Table</h2>
<div style="width: 100%;">
  <table>
    <tr>
      <th>Content</th>
      <th>Name</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
    </tr>
    <tr><td><span>overflow-x:auto around the table, and it will display a horizontal scroll bar when needed</span></td>      <td><span>Smith</span></td>      <td><span>50</span></td>      <td><span>50</span></td>      <td><span>50</span></td>      <td><span>50</span></td>      <td><span>50</td>
    </tr>
    <tr><td><span>Eve Resize the browser window to see the effect. Try to remove the div element and see what happens to the table</span></td>      <td><span>Mike</span></td>      <td><span><span>94</span></span></td>      <td><span><span>94</span></span></td>      <td><span><span>94</span></span></td>      <td><span><span>94</span></span></td>      <td><span><span>94</span></td>
    </tr>
    <tr><td><span>Adamthat is too wide, you can add a container element with overflow-x:auto around the table</span></td>      <td><span>Johnson</span></td>      <td><span>67</span></td>      <td><span>67</span></td>      <td><span>67</span></td>      <td><span>67</span></td>      <td><span>67</td>
    </tr>
  </table>
</div>

【讨论】：