Question

请参阅HTML＆amp; amp; CSS下面。你可以在这里看到它的截图：https://www.dropbox.com/s/i7yszk2v7jlwdxr/Screenshot%202013-12-17%2012.58.00.png

我的问题是如何确保此表只占用所需的水平空间 - 而不是页面的整个宽度？这似乎是一个非常简单的问题：只需删除“宽度：100％;”排在第5行。但是，如果你看到它会以一种没人真正想要的方式搞砸桌子：https://www.dropbox.com/s/hztj01y3901whv9/Screenshot%202013-12-17%2013.01.18.png

<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            .myStyle table { border-collapse: collapse; text-align: left; width: 100%; } 
            .myStyle {font: normal 12px/150% Arial, Helvetica, sans-serif; background: #fff; overflow: hidden; border: 1px solid #801D99; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
            .myStyle table td, 
            .myStyle table th { padding: 3px 10px; }
            .myStyle table thead th {background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #801D99), color-stop(1, #801D99) );background:-moz-linear-gradient( center top, #801D99 5%, #801D99 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#801D99', endColorstr='#801D99');background-color:#801D99; color:#FFFFFF; font-size: 15px; font-weight: bold; border-left: 1px solid #801D99; } 
            .myStyle table thead th:first-child { border: none; }
            .myStyle table tbody td { color: #801D99; font-size: 12px;border-bottom: 1px solid #995993;font-weight: normal; }
            .myStyle table tbody td:first-child { border-left: none; }
            .myStyle table tbody tr:last-child td { border-bottom: none; }
        </style>
    </head>
    <body>
        <div class="myStyle">
            <table>
                <thead>
                    <tr>
                        <th colspan="2">My table.</th>
                    </tr>
                </thead>
                <tbody>
                        <tr><td>1.</td><td>B</td></tr>
                        <tr><td>2.</td><td>C</td></tr>
                        <tr><td>3.</td><td>D</td></tr>
                </tbody>
            </table>
    </body>
</html>

Answer 1

将display元素的div.myStyle修改为inline-block;这可以防止table获取父级宽度的100%（因为width以百分比形式分配，父级width必须明确说明/定义），因此只需它需要的空间以及父div元素根据其内容的大小进行折叠。 Demo

或者，您可以忽略display属性，而是设置：float: left;，它将实现相同的（demo），但请注意另一个相邻的兄弟元素占用空间元素为float时的右侧 - 编辑。

CSS样式如何使此表不填充整个页面宽度？

1 个答案: