开发者

How do you stop HTML tables from being propped up by the content?

开发者 https://www.devze.com 2023-01-15 06:49 出处：网络

With some HTML like this: <!DOCTYPE html> 开发者_运维技巧<html> <head> <meta charset=utf-8 />

相关专题：html-table

With some HTML like this:

<!DOCTYPE html>
开发者_运维技巧<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
  <style>
    td {
      width:10px;
    }
  </style>
</head>
<body>
  <table>
    <tr><td>Text</td><td>Text</td><td>Text</td><td>Text</td></tr>
    <tr><td>Text</td><td>Text</td><td>Text</td><td>Text</td></tr>
    <tr><td>WHOA I'M A LONG STRING!</td><td>Text</td><td>Text</td><td>Text</td></tr>    
  </table>
</body>
</html>

The tds don't get a width of 10px, they are just as long as the longest string in them.

How do you make this work?

You can change the css to:

max-width: 10px;
overflow: hidden;

but that will chop off the words mid-letter, wherever the edge happens to be.

I think all you could do is wrap the content in a div and give the div a width and overflow:hidden. It cuts off the text (or content), so that may not be what you're looking for.