웹 페이지 제작 TD는 디스플레이_HTML/Xhtml_웹 페이지 제작을 오버플로하고 숨길 수도 있습니다.-HTML 튜토리얼-php.cn

웹 페이지 제작 TD는 디스플레이_HTML/Xhtml_웹 페이지 제작을 오버플로하고 숨길 수도 있습니다.

WBOY

풀어 주다： 2016-05-16 16:42:15

원래의

2013명이 탐색했습니다.

어쩌면 내가 이 기사에 그런 이름을 붙이자마자 누군가는 이렇게 물을 것입니다: 왜 아직도 테이블에 관심을 기울이고 있습니까? 그것은 이미 오래된 것입니다... 서둘러 Xhtml... div가 좋습니다... ul이 좋습니다. .. ol은 좋다... dl은 좋다... 끝났어, 아니 다른 것을 아는 것이 좋습니다.

테이블이 정말 낡았나요? 테이블을 정말 이해하시나요? 테이블 사용법을 정말로 알고 있나요?

말싸움은 저희가 하고 싶은 일이 아니니 시간이 넉넉하신 분들에게 맡겨주세요.

주제로 돌아가기:

누군가가 DataGrid를 시뮬레이션하기 위해 테이블을 사용하고 왜 고정 너비를 초과하는 td의 텍스트를 숨길 수 없는지 물어본 기억이 없습니다. 직접 포장할까요?

예, 다음과 같은 경우가 있습니다.

팁: 실행하기 전에 코드의 일부를 수정할 수 있습니다.
위의 코드를 실행하면 고정 너비를 초과하는 셀의 텍스트가 숨겨지지 않고 새 줄에 표시되는 것을 볼 수 있습니다. 분명히 이것은 제 의도가 아닙니다.

이는 테이블의 특징인 것 같습니다. 최종적으로는 흰색입니다. -space: nowrap이 작동하지 않아서 Overflow:hidden이 잘못된 것 같습니다. {참고: 일련의 의미 없는 문자인 경우 다음과 같이 적용될 수 있습니다. & lt; 그래서 .col1의 너비를 초과하는 a는 숨겨집니다.}

　[해결책 1:]

나중에 누군가 백분율 너비를 사용하는 것으로 충분하다고 테스트한 후 실제로 가능하다고 언급했습니다. 첫 번째 단락에서 몇 줄의 스타일을 약간 수정하고 나머지는 변경하지 않고 그대로 둡니다.

.col1 {width:20%;}
.col2 {width:40%;}
.col3 {width:40%;}

수정된 코드를 실행해 보면 너비를 초과하는 텍스트가 실제로 숨겨지는 것을 볼 수 있습니다.

실제로 백분율 너비를 사용하면 텍스트 숨김 문제를 실제로 해결할 수 있지만 때로는 백분율 너비가 아닌 고정 너비가 필요하기 때문에 이것이 최선의 해결책은 아닌 것 같습니다.

이 모든 것의 근원은 셀의 텍스트를 줄 바꿈 없이 한 줄로 표시하는 방법입니다.

　[해결책 2:]

이 요구 사항을 충족하려면 스타일을 사용하는 것 외에도 오랫동안 사용되지 않은 태그 를 생각해 볼 수도 있습니다. 이 요소의 기능은 콘텐츠를 한 줄에 표시하도록 하는 것입니다. 위 코드를 다음과 같이 수정하고 다른 모든 항목은 변경하지 않습니다.

선저우 엘레강트 Q400N

;nobr> Intel Core2 Duo(Merom) T5450(1.66G) 프로세서를 사용하는 우아한 Q400N

Centrino 4 플랫폼 가격 대비 훌륭한 가치, 아름다운 외관

이렇게 수정하면 효과가 과연 달성했는지, 이제 기대해볼 시간인가요? 아니요, 이것이 최선의 해결책은 아닌 것 같습니다. 왜냐하면 결국 오랫동안 사용되지 않은 요소 태그를 사용하는 것은 다소 불쾌하고 권장되지 않기 때문입니다.

이 생각에 따라 이 문제를 다른 각도에서 생각해 보니 문제가 쉽게 해결되었다는 것을 알았습니다.

고정 너비 셀의 th 및 td에 단순히 white-space:nowrap을 추가할 수 없으므로 고정 너비 셀에 mark 요소를 추가하면 어떻게 될까요?

최상의 솔루션:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<meta http-equiv="Content-Language" content="gb2312" /> 
<title>回头来看看Table：TD也玩overflow:hidden</title> 
<style type="text/css"> 
table {width:500px;table-layout:fixed;} 
.col1 {width:100px;} 
.col2 {width:200px;} 
.col3 {width:200px;} 
th strong {display:block;width:100%;} 
tr strong,tr td {white-space:nowrap;overflow:hidden;} 
</style> 
<script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script>
</head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> 
<body> 
<table border="1" cellspacing="0" summary="测试"> 
<thead> 
<tr> 
<th class="col1"><strong>产品名称</strong></th> 
<th class="col2"><strong>产品介绍</strong></th> 
<th class="col3"><strong>产品备注</strong></th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>神舟 优雅Q400N</td> 
<td>优雅Q400N，2007年7月上市，采用Intel Core2 Duo(Merom) T5450(1.66G)处理器</td> 
<td>迅驰4平台，突出的性价比，漂亮的外观</td> 
</tr> 
</tbody> 
</table> 
</body> 
</html>

提示：您可以先修改部分代码再运行

　　运行上面的代码，会发现这样的做法是可以的，而且从代码的简洁性、可读性和合理性几方面来说，都较前几种方案为好。

　　{还没有做过给单元格隐藏超过固定宽度内容的同学，可先在机器上玩玩，然后再来看本文}

　　其实table是一个有趣，可玩性很高东东。我们不应该带着有色眼睛去看它，因为它有它存在的道理。

　　之后会继续写一些关于table的文章，也作自娱之用。