表格内的div自动调整大小和左右边距答案

【问题标题】：Div inside table auto-size and margins left and right表格内的div自动调整大小和左右边距
【发布时间】：2015-07-01 17:26:01
【问题描述】：

我有一个 800 像素宽度的表格，以正文 html 为中心。在这个表格里面我想要一个 DIV，它必须有 10px 的 margin-left 和 10px 的 margin-right ，其余的都是表格宽度的 100%。

尝试使用 div 宽度 100% 并给它左右边距它看起来不太好。

再次测试我只是给它左右边距而不给它一个宽度，似乎在 Chrome 上 DIV 自动调整到整个宽度并给左右边距完美并且工作良好。

问题是它是否真的适用于所有浏览器，或者我只是幸运地使用了 Chrome。这样做的正确形式是什么？

因为表格是我的布局的一部分，所以我希望它在里面有一个 div，就像下面的例子一样：

<!doctype html><html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testing Width</title></head><body>

<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
<tr><td align="center" valign="top">

<div style="background-color:#000000; color:#cccccc; margin-left:10px; margin-right:10px;">
Testing auto-size of divs by default. 
Because the table is 800 px and I am not giving the div 
a width does it auto-resize 100% width 
less 10px left and 10px right margin? 
That means also that it alto-resizes to 780px?
</div>

这不是代码审查。我需要帮助来给它正确的宽度和边距，让它在所有浏览器上都能工作

编辑：

如果表格宽度为 80%，而我需要 div 为 100% 宽度加上左右边距 10px，该怎么办？

【问题讨论】：

默认情况下，像div 这样的块级元素会自动调整到父容器的宽度（考虑到左边距/右边距）。在这种情况下，父容器是 800 像素宽的表格中的表格单元格。这应该适用于所有浏览器，因为它是标准 CSS。
尝试下载不同的浏览器并自己测试。这是确保代码在浏览器之间交叉兼容的唯一可靠方法！
其实可以calcwidth property:div{width: calc( 100% - 20px )}
maioman 所以我尝试了 100% - 20px 但如果我的桌子是液体宽度 100% 怎么办？

标签： html css web

【解决方案1】：

您在代码部分中正确执行了此操作，但为了更容易开发和可维护性，您可以使用纯基于 CSS 的表格。此外，由于很多表格属性已被弃用，例如 valign 和 border，因此您最好使用标准 CSS 样式。 HTML 代码：

<div class="table">
    <div class="tr">
        <div class="td">
            <div class="column">
            Testing auto-size of divs by default. 
            Because the table is 800 px and I am not giving the div 
            a width does it auto-resize 100% width 
            less 10px left and 10px right margin? 
            That means also that it alto-resizes to 780px?
            </div>
        </div>
     </div>
</div>

以及相关的CSS代码：

.table {
    display: table;
    width: 800px;
    vertical-align: top;
    padding: 0px;
    border-spacing: 0px;
    margin-left: auto;
    margin-right: auto;
}
.tr {
    display: table-row;
}
.td {
    display: table-cell;
    vertical-align: top;
    margin-left: auto;
    margin-right: auto;
}
.column {
    margin-left: 10px;
    margin-right: 10px;
}

您可以从here 了解为什么要使用基于 CSS 的表格以及如何调整它们。

【讨论】：

我需要它是表格，因为该网站已经可以这样工作，并且表格在所有浏览器甚至手机上都可以正常工作。我编辑添加了关于使用 80% 宽度的表和 div 在宽度 100% 之前相同的液体表的问题 - 左右边距。如果表格是屏幕宽度的 80% 的液体，它仍然可以工作吗？
它应该可以正常工作，但旧的 IE 或 Android 浏览器不支持计算。只需在 div 上使用 10px 的边距。无论如何，您应该使用jsfiddle 或smth 对其进行测试，直到找到可行的解决方案。