overflow:hidden not working when using tables

前端未结

关注

 4  701

I’m having issues with long strings of text stretching out my tables and overflow:hidden does not seem to be doing what I exect. Here’s the sample code I am usi

相关标签:

4条回答

一整个雨季

2020-12-11 02:32

<html>
<head>
<style>
td { width: 33%; height: 2em; }
td div { width:100%;height:100%;overflow:hidden }
</style>

</head>

<body>

<table border="1" style="width:300px;">
<tr><td>x</td><td><div>y</div></td><td>z</td></tr>
<tr><td>x</td><td><div>this is going to be hidden because it is too long</div></td><td>z</td></tr>
<tr><td>x</td><td><div>y</div></td><td>z</td></tr>
</table>

</body>

</html>

0 讨论(0)

长发绾君心

2020-12-11 02:39
By default the auto-table-layout mechanism expands the table width to fit the minimum cell content width. Tell it not to do that with the table-layout property:
```
<table width="100%" style="table-layout: fixed">
```
and your example works as expected. You should probably also remove the width: 100px from the table cells, since that makes no sense in combination with a 100%-width table. (Although with fixed table layout it doesn't matter, as only the first row of cells or <col>s has any bearing on the column widths.)

Note overflow: scroll or auto doesn't work for table cells in most browsers. (It does in WebKit.)
0 讨论(0)
发布评论:

提交评论
- 加载中...

不知归路

2020-12-11 02:43

Overflow only works on block level elements. Table elements aren't block elements. If you want to get those effects put a <div> inside the table cell and apply the effects to the <div>.

td.scroll div {
  background-color: #00FFFF;
  width: 100px;
  height: 100px;
  overflow: scroll;
}

td.hidden div {
  background-color: #00FF00;
  width: 100px;
  height: 100px;
  overflow: hidden;
}

with:

<table width="100%">
<tr>
  <td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
  <td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
  <td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
</tr>

<tr>
  <td class="scroll"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
  <td class="scroll"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
  <td class="scroll"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
</tr>

<tr>
  <td class="hidden"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
  <td class="hidden"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
  <td class="hidden"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
</tr>
</table>

0 讨论(0)

南方客

2020-12-11 02:48

Not sure if it isn't supposed to be working for table cells, but ideally you don't really want to hide them anyway. I suggest you hyphenate long words, which you can do easily with the following lib (only take few lines of js to implement):

http://code.google.com/p/hyphenator/

Example:

http://hyphenator.googlecode.com/svn/tags/Version%202.2.0/WorkingExample.html

0 讨论(0)
发布评论:

提交评论
- 加载中...