【表格】固定列宽的表格示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <base target="_blank" /> <title>三十客 - 【表格】固定列宽的表格示例</title> <style> td { border: 1px solid black; } table { margin: 15px 0; border: 1px solid black; table-layout: fixed; width: 100%; } html { background: #ccc; } body { max-width: 400px; margin: 0 auto; background: white; padding: 10px; } .thousand td { width: 1000px; } .image td { overflow: hidden; } .whitespace td { white-space: nowrap; overflow:hidden; } .calc td:nth-child(1) { width: 2000px; } .calc td:nth-child(2) { width: 1000px; } </style> </head> <body> <h1>怪异的表格缺省样式</h1> <table> <tr> <td>我是一个表格</td> <td>其它内容</td> </tr> </table> <table> <tr> <td>如果不指定宽度</td> <td>单元格的宽度将取决于内部内容的宽度。本单元格更宽对么? ¯\(°_o)/¯</td> </tr> </table> <table class="thousand"> <tr> <td>是不是很奇怪?</td> <td>如果两个单元都指定了1000px的宽度,但实际上并不是所指定的那样。</td> </tr> </table> <table class="calc"> <tr> <td>宽度设定为2000px,但实际显示的宽度是66.66%。 </td> <td>宽度设定为1000px,但实际显示的宽度是33.33%。</td> </tr> </table> <table class="image"> <tr> <td>一个很宽很宽的图片</td> <td>溢出单元格外了 <img src="http://res.30ke.cn/u/1/201808/hfe4jriws0.jpg" /> 做溢出隐藏无效 </td> </tr> </table> <table class="whitespace"> <tr> <td>一些不折行的文本?</td> <td>这些文字(非折行文本)会溢出本单元格所在表格</td> </tr> </table> <table class="code"> <tr> <td>象代码一样的预格式文本也有问题。</td> <td><pre> .post article > h2 { background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 0, 0, 0.2)); } </pre></td> </tr> </table> </body> </html>