表格自适应代码
以下是一个简单的例子,它将使表格宽度自适应其父元素的宽度:
html
<!DOCTYPE html> | |
<html> | |
<head> | |
<style> | |
table { | |
width: 100%; /* 表格宽度占满父元素 */ | |
border-collapse: collapse; /* 合并边框 */ | |
} | |
table, th, td { | |
border: 1px solid black; /* 添加边框 */ | |
} | |
</style> | |
</head> | |
<body>Lastname</th> | |
<th>Age</th> | |
</tr> | |
<tr> | |
<td>Jill</td> | |
<td>Smith</td> | |
<td>50</td> | |
</tr> | |
<tr> | |
<td>Eve</td> | |
<td>Jackson</td> | |
html colspan属性 <td>94</td> | |
</tr> | |
</table> | |
</body> | |
</html> | |
这段代码将创建一个表格,表格的宽度会根据其父元素的宽度自动调整。表格的每一列都会平均分配可用的空间。如果你想要某一列占据更多的空间,你可以使用colspan属性。但请注意,这将会减少表格的总列数。
如果你想要表格内的内容也自适应宽度,你可能需要使用CSS的word-wrap或overflow-wrap属性来处理过长的文本。例如:
css
td { | |
word-wrap: break-word; /* 在长单词或URL内部进行换行 */ | |
overflow-wrap: break-word; /* 同上,这是更新的属性名,兼容新版浏览器 */ | |
} | |
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论