HTML表格宽度不起作用
Posted
技术标签:
【中文标题】HTML表格宽度不起作用【英文标题】：HTML table width not working 【发布时间】：2013-11-17 11:47:09 【问题描述】：<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<table border="1" >
<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% 中。那么，您期望会发生什么？如果您解释您希望达到的效果，也许我们可以帮助您实现。 【参考方案1】：问题是，表格中的内容需要的空间超过了 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>
溢出属性有 4 个选项可用：可见、隐藏、滚动和自动。上面的例子说明了滚动选项，它为表格本身添加了一个滚动条。
【讨论】：
【参考方案2】：如果表格内容太宽（如您的示例中），除了更改内容以使浏览器可以以较窄的格式显示它之外，您无能为力。如果内容太宽，设置width:100%; 将不起作用。浏览器只会求助于显示水平滚动条。
您可以通过以下方式缩小内容范围：
减少列数 在任何内容上使用CSS white-space: nowrap，因此浏览器可以选择包装该内容以减小宽度。
减少所有边距、边框、内边距
减小字体大小
使用word-wrap:break-word 或word-break: break-all;
使用overflow: scroll; 溢出不适合屏幕宽度的内容（您的选项是可见、隐藏、滚动和自动）
如果可以，浏览器会避开滚动条，但如果内容不能适应页面宽度，则不会。
【讨论】：
您还可以做其他事情。更改字体大小，word-wrap:break-word 等。甚至可以将表格保持在 100%，但内容会溢出。我只是不知道 OP 希望达到哪些效果。
我也会加入 CSS 的 word-break: break-all;
如果你给出一个实际的例子而不只是使用项目符号会有所帮助。
CSS不应该是空白：正常吗？我遇到了类似的问题，其中一些表头文本用空格包裹在 中：不换行。宽屏幕的漂亮标题格式，但阻止宽度：100% 用于更小。
【参考方案3】：
这个令人惊讶的简单解决方案对我有用。
table width: 100%;
table td, table th overflow-wrap: anywhere;
在这里预览：https://jsfiddle.net/3m2Lw7d4/
注意：overflow-wrap replaces word-wrap 在官方 CSS3 中。
【讨论】：
这是最简单的方法，对我来说效果很好。【参考方案4】：只需要应用表格布局：固定
table
table-layout: fixed;
table tr td
max-width: 100%;
overflow-x: auto;
<table border="1" >
<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>【讨论】：
【参考方案5】：您可以将一个元素放入单元格中 - 这就是我所做的。
<table>
<tr>
<td><div style="width:200px">YOUR CONTENT</div></td>
<td><div style="width:200px">YOUR CONTENT</div></td>
<td><div style="width:200px">YOUR CONTENT</div></td>
<td><div style="width:200px">YOUR CONTENT</div></td>
</tr>
<tr>
<td><div style="width:200px">YOUR CONTENT</div></td>
<td><div style="width:200px">YOUR CONTENT</div></td>
<td><div style="width:200px">YOUR CONTENT</div></td>
<td><div style="width:200px">YOUR CONTENT</div></td>
</tr>
</table>
【讨论】：
【参考方案6】：其实<table border="1" width="100%">错误。
你应该完成<table border="1" width="100">
其他一切都必须正确
【讨论】：
【参考方案7】：对于引导程序，将带有 .table 类的表元素包装在带有 .table-responsive 类的包装器 <div> 中。试试这个代码。复制表格here
<div class="table-responsive">
<table class="table">
...
</table>
</div>
【讨论】：
【参考方案8】：你可以在你的表中放一个类，比如
<table border="1" class="size" >
，然后从您的 css 中放入
.size
width : 100%;
你应该把你的css的链接放在 像这样：
<link href="css/YOUR_CSS.css" rel="stylesheet" type="text/css" media="all" />
【讨论】：
您应该在发布之前测试这些内容。如果您进行了测试，那么您会发现此解决方案与 OP 的问题完全相同。即使您纠正了示例中的错误。 对不起，坦率地说，但是看着你的解决方案让我头疼。谢谢。 如果你从编程开始，你会看到html和css一般是“一对”的，这意味着css类设计你的html代码是因为css代码。因此，您使用 .css 创建了一个新文件，并使用我喜欢的 调用此页面 你可以随心所欲，但这里的答案应该是解决问题，而不是提供更多问题。修改后，还是有错误。就像我说的，即使没有错误它也不会工作！ 什么是“编程”？以上是关于HTML表格宽度不起作用的主要内容，如果未能解决你的问题，请参考以下文章
bootstrap table 表格太宽，设置的width属性不起作用怎么办
bootstrap table 表格太宽，设置的width属性不起作用怎么办