gpt4 book ai didi

HTML 表格宽度不起作用

转载 作者:技术小花猫 更新时间:2023-10-29 12:14:02 25 4
gpt4 key购买 nike

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>

<table border="1" width="100%">

<tr>
<td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
</tr>


</table>




</body>
</html>

我正在尝试将上表的表格宽度设置为 100%,但它没有任何效果,因为它超出了窗口宽度。我如何更改表格的宽度,使其与窗口的大小相同。

最佳答案

问题是,表格中的内容需要的空间超过 100% 的窗口大小。

您可以做的是使用 CSS 的溢出属性。尝试以下示例并选择,这是否适合您:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
.table {
color: green;
display: block;
max-width: 100%;
overflow: scroll; <!-- Available options: visible, hidden, scroll, auto -->
}
</style>
</head>
<body>

<table border="1" class="table">

<tr>
<td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
</tr>


</table>
</body>
</html>

overflow-property 有 4 个选项可用:visible、hidden、scroll 和 auto。上面的示例说明了滚动选项,它向表格本身添加了一个滚动条。

关于HTML 表格宽度不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19808710/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com