HTML 表格宽度不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19808710/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML table width not working
提问by user2959594
<!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>
I am trying to set the table width to 100% for above table but it has no effect it goes beyond window width. how do i change the width of table so it is same size as window.
我正在尝试将上表的表格宽度设置为 100%，但超出窗口宽度没有任何影响。如何更改表格的宽度，使其与窗口大小相同。
回答by DonnyDee
The problem is, the content inside your table requires more space than 100% of your window-size offers.
问题是，表格中的内容需要的空间大于 100% 的窗口大小。
What you could do, is to use the overflow-property of CSS. Try the following example and chose, wether this is an option for you:
您可以做的是使用 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>
There are 4 options available for the overflow-property: visible, hidden, scroll and auto. The above example illustrates the scroll-option, which adds a scroll-bar to the table itself.
溢出属性有 4 个可用选项：可见、隐藏、滚动和自动。上面的例子说明了滚动选项，它向表格本身添加了一个滚动条。
回答by tomsullivan1989
There is nothing you can do if the table content is too wide (as in your example), apart from alter the content to make it possible for the browser to show it in a narrower format. Setting width:100%;will have no effect if the content is too wide. The browser will just resort to displaying a horizontal scrollbar.
如果表格内容太宽（如您的示例中所示），除了更改内容以使浏览器能够以更窄的格式显示之外，您无能为力。width:100%;如果内容太宽，设置将不起作用。浏览器只会显示水平滚动条。
You can make your content more narrow by:
您可以通过以下方式缩小内容范围：
- Reducing the number of columns
- using
CSS white-space: nowrapon any of the content, so the browser has the option of wrapping that content to keep the width down. - Reduce any margins, borders, padding that you have
- Reduce the font size
- Use
word-wrap:break-wordorword-break: break-all; - Overflow the content that doesn't fit within the screen's width with
overflow: scroll;(your options are visible, hidden, scroll and auto)
- 减少列数
- 使用
CSS white-space: nowrap上的任何内容，所以浏览器有包装的内容，以保持宽度下的选项。 - 减少您拥有的任何边距、边框、填充
- 减小字体大小
- 使用
word-wrap:break-word或word-break: break-all; - 溢出不适合屏幕宽度的内容
overflow: scroll;（您的选项是可见、隐藏、滚动和自动）
The browser will avoid the scrollbar if it can, but it won't if the content can't fit within the width of the page.
如果可以，浏览器将避免滚动条，但如果内容不能适应页面的宽度，则不会。
回答by Stevoh
You can put an element into the cells - that's what I did.
您可以将一个元素放入单元格中 - 这就是我所做的。
<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>
回答by Thomas Trabelsi
you can put a class in your table like
你可以在你的桌子上放一个类
<table border="1" class="size" >
, and from your css you put
，并从你的 css 你把
.size{
width : 100%;
}
and you should put the link of your css between like this :
你应该把你的 css 链接放在这样的地方：
<link href="css/YOUR_CSS.css" rel="stylesheet" type="text/css" media="all" />
