table表格宽度问题

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>table</title> 
</head>
<body>

<table border="1">
  <colgroup width="200">
	  <col width="100"></col>
	  <col width="100"></col>
  </colgroup>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Januarsfasfdasfdafdasdfy</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

</body>
</html>

设置列宽都是100，希望当文字过长时隐藏，或者省略号显示，但是td被撑开，无法实现设定宽度

在这里插入图片描述

网上提供的解决方案：

1.方法1

table-layout: fixed;

tr,td {
	white-space: nowrap;
 	text-overflow: ellipsis;
 	word-break: break-word;
 	overflow: hidden;
}

无效
主要原因发现是table没有给定宽度，所以fixded的列调整列宽存在问题

在这里插入图片描述

0 条评论