写一个简单的表格
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table{ width: 100%; border-collapse: collapse; } </style> </head> <body> <table border> <tr> <td>测试1</td> <td colspan="3">超长文本测试超长文本测试超长文本测试超长文本测试超长测试超长文本测试超长文本测试超长文本测试超长文本测试超长测试</td> </tr> <tr> <td>测试2</td> <td><input type="text"></td> <td>测试2-1</td> <td><input type="text"></td> </tr> <tr> <td>测试3</td> <td colspan="3">超长文本测试666666666666666666666666666666666</td> </tr> <tr> <td>测试4</td> <td><input type="text"></td> <td>测试4-1</td> <td><input type="text"></td> </tr> </table> </body> </html>
效果：
想实现的效果
如下图，想要红框的宽度固定为某个宽度，比如150px，其它列可以拉伸
利用table-layout跟colgroup实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table{ width: 100%; border-collapse: collapse; /* 列宽由表格宽度和列宽度设定*/ table-layout: fixed; } .title { background-color: #eee; } </style> </head> <body> <table border> <colgroup> <col width="150"> <col width="auto"> <col width="150"> <col width="auto"> </colgroup> <tr> <td class="title">测试1</td> <td colspan="3">超长文本测试超长文本测试超长文本测试超长文本测试超长测试超长文本测试超长文本测试超长文本测试超长文本测试超长测试</td> </tr> <tr> <td class="title">测试2</td> <td><input type="text"></td> <td class="title">测试2-1</td> <td><input type="text"></td> </tr> <tr> <td class="title">测试3</td> <td colspan="3">超长文本测试666666666666666666666666666666666</td> </tr> <tr> <td class="title">测试4</td> <td><input type="text"></td> <td class="title">测试4-1</td> <td><input type="text"></td> </tr> </table> </body> </html>
效果：150px固定了
