Question

<!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％，但它不会超出窗口宽度。如何更改表格的宽度，使其与窗口大小相同。

Answer 1

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

你能做的是使用CSS的overflow-property。尝试以下示例并选择，这是一个选项：

<!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个选项：可见，隐藏，滚动和自动。上面的例子说明了scroll-option，它为表本身添加了一个滚动条。

Answer 2

如果表格内容太宽（如在您的示例中），您无法做任何事情，除了更改内容以使浏览器能够以更窄的格式显示它。如果内容太宽，设置width:100%;将无效。浏览器只会显示一个水平滚动条。

您可以通过以下方式缩小内容：

减少列数
在任何内容上使用CSS white-space: nowrap，因此浏览器可以选择包装该内容以保持宽度不变。
减少任何边距，边框，填充
缩小字体大小
使用word-wrap:break-word或word-break: break-all;
使用overflow: scroll;覆盖不适合屏幕宽度的内容（您的选项可见，隐藏，滚动和自动）

如果可以的话，浏览器会避开滚动条，但如果内容不能适合页面的宽度，则浏览器不会。

Answer 3

这个非常简单的解决方案为我解决了问题。

> getS3method('head', 'sfg')
function (x, n = 10L, ...) 
{
    structure(head(unclass(x), n = n, ...), class = class(x))
}
<bytecode: 0x5646a6a38228>
<environment: namespace:sf>

此处预览：https://jsfiddle.net/3m2Lw7d4/

注意：overflow-wrap replaces word-wrap在官方CSS3中。

Answer 4

只需要应用table-layout：fixed

table {
table-layout: fixed;
}

table tr td {
max-width: 100%;
overflow-x: auto;
}

<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>

Answer 5

实际上是<table border="1" width="100%">错误。

您应该已经完成<table border="1" width="100">

其他所有内容都必须正确

Answer 6

你可以将一个元素放入单元格 - 这就是我所做的。

<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>

Answer 7

对于引导程序，将具有.table类的表元素包装到具有<div>类的包装器.table-responsive中。试试这个代码。复制表格here

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Answer 8

你可以在你的表中放一个类，如

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

，从你的css中提出

  .size{

             width : 100%;

             }

你应该把你的CSS的链接放在像这样：

<link href="css/YOUR_CSS.css" rel="stylesheet" type="text/css" media="all" />

HTML表格宽度不起作用

8 个答案: