响应表中的响应第一列

时间：2018-08-14 01:58:11

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

六列表的第一列填充了各种长度的内容。我想使它仅响应一行，并被隐藏的省略号和省略号切断，同时保持表格在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

我们非常感谢您的帮助。

3 个答案:

答案 0 :(得分：0)

秘密在于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%。

答案 1 :(得分：0)

将下面的样式类分别应用于表格单元格应使文本剪辑。

<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>

要查看上述样式的效果，请减小/最小化浏览器的大小/宽度。

答案 2 :(得分：-1)

最后我想出了解决这个问题的方法。

秘密在于在TD中包含省略号文本的两个不同位置。这可以通过在TD中使用 position：absolute 添加一个新的span元素来完成，而TD本身使用 position：relative 。

STEPS：

  1. 使用 white-space：nowrap;

    2. 设置所有TD的样式

  2. 使用 width：100％和 position：relative

    3. 样式的第一个TD

  3. 使用 position：absolute; overflow：隐藏； text-overflow：省略号； < strong>左：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>

相关问题
最新问题