html表格宽度>页面宽度右填充不起作用

Question

我有一个包含很多列的表格，我需要列的宽度相同，所以表格的总宽度大于页面宽度，这很好，因为浏览器显示水平滚动条。我无法解决的是，虽然左侧和顶部填充没问题，但右侧填充不起作用，表格右端和浏览器框架之间没有空间。

<table>
    <tr><td>A</td><td>B</td><td>C</td></tr>
    <tr><td>D</td><td>E</td><td>F</td></tr>
    <tr><td>G</td><td>H</td><td>I</td></tr>
</table>

table {
    width: 200%;
    padding: 10px 0px 10px 0px;
    background-color: #800000;
}
td {
    background-color: #ffa500;
}

这是一个 fiddle

Answer 1

正如 Umar A. 在回答中提到的，您使用 padding 作为 padding: 10px 0px 10px 0px;也就是说，padding top and bottom 是 10px，padding left 和 right 是 0px；用作 padding:10px 如果你想要它在所有方面。

但是，这里是提到的示例，看来您不需要填充。您实际上需要将 margin-right 用作表格右侧的空白。即使你设置了 margin-right 的值，它也不会产生效果。

之所以会这样，是因为布局宽度 > 100%，element + margin-right 现在超出了视口(viewport)，整个视口(viewport)宽度都被 table 占用了。使视口(viewport)小于 100% 并且存在边距。您将表格的宽度设置为 200%。这是什么的200%？整个页面正文。所以，这意味着，您希望表是其父容器的 200%。现在，像 margin 这样的东西被应用到一个元素上，与它周围的元素(如父容器)进行比较。但在右侧，元素大小超出了容器大小。因此，边距等属性没有任何视觉效果。您可以在下面的代码片段中看到它。我将表格包裹在一个 div 中以显示 margin-right 的应用。

div{
		overflow:auto;
		border:7px solid black;
	}
	
	table {
		width: 80%;		
    margin-right:150px;
		background-color: #800000;
		display:inline-block;
	}

	td {
		background-color: #ffa500;
		}

<div>
<table>
<thead></thead>
<tbody>
    <tr><td>A</td><td>B</td><td>C</td></tr>
    <tr><td>D</td><td>E</td><td>F</td></tr>
    <tr><td>G</td><td>H</td><td>I</td></tr>
</tbody>	
</table>
</div>

但是当您将表格的宽度设置为小于 100% 时，与其周围的元素相比，margin-right 将开始应用自身。因为现在，表格的宽度 + margin-right < 文档主体的宽度，默认为窗口视口(viewport)的 100%。因此，您可以通过将表包装在像 div 这样的 block 级元素中并允许它占用 div 来创建您想要实现的效果。给它相对定位，然后定义它应该放在距右侧 5px 的位置。如果您还指定了 left，则 left 将覆盖 right。

Another reference

div{
		overflow:auto;
		position:relative;
		right:5px !important;
		height:100%;
	}
	
	table {
		width: 200%;
		background-color: #800000;
		
	}

	td {
		background-color: #ffa500;
		}

<div>
<table>
<thead></thead>
<tbody>
    <tr><td>A</td><td>B</td><td>C</td></tr>
    <tr><td>D</td><td>E</td><td>F</td></tr>
    <tr><td>G</td><td>H</td><td>I</td></tr>
</tbody>	
</table>
</div>