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

作为一般经验法则，将padding视为面向内的间距，将margin视为面向外的间距。

话虽如此，如果table的宽度设置为margin-right，则table元素将不会应用100%，因此我建议包裹{{1}例如table div中的margin-right: 10px;。

更新

Here's a working fiddle。如果您正在尝试模拟宽桌，请记住table将占用所有可用宽度，无需将其设置为width: 200%;，因为这会产生意外结果。

Answer 2

填充速记属性的css语法如下：

填充：右上角左下角;

你设置如下：

padding: 10px 0px 10px 0px;

这意味着：

padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;

因此，你的表的行为是正常的。

如果您检查浏览器检查员的小提琴，您会得到以下结果：

你可以看到身体有8px的边距。表......

...左右填充设置为0px。

PS：缩放以更好地查看图像，或点击它。

Answer 3

根据Johnny Kutnowski的说法，将宽度设置为200％将无法获得清晰的结果，这是正确的。此外，如果您依赖于浏览器的滚动，那么即使您将表格放在div中，它也会超出并粘在屏幕的角落上。

尝试使用此代码，如果表格宽度超过，则可以使用具有滚动的div。

既然你提到你有很多专栏：

<div class="container">
  <table>
      <tr><td>A</td><td>B</td><td>C</td><td>A</td><td>B</td><td>C</td>
      <td>A</td><td>B</td><td>C</td><td>A</td><td>B</td><td>C</td>
      <td>A</td><td>B</td><td>C</td><td>A</td><td>B</td><td>C</td>
      <td>A</td><td>B</td><td>C</td><td>A</td><td>B</td><td>C</td>
      </tr>
      <tr><td>D</td><td>E</td><td>F</td><td>A</td><td>B</td><td>C</td>
      <td>A</td><td>B</td><td>C</td><td>A</td><td>B</td><td>C</td>
      <td>A</td><td>B</td><td>C</td><td>A</td><td>B</td><td>C</td>
      <td>A</td><td>B</td><td>C</td><td>A</td><td>B</td><td>C</td>
      </tr>
      <tr><td>G</td><td>H</td><td>I</td><td>A</td><td>B</td><td>C</td>
      <td>A</td><td>B</td><td>C</td><td>A</td><td>B</td><td>C</td>
      <td>A</td><td>B</td><td>C</td><td>A</td><td>B</td><td>C</td>
      <td>A</td><td>B</td><td>C</td><td>A</td><td>B</td><td>C</td>
      </tr>
  </table>
</div>


table {
    width: 100%;
    padding: 10px 0px 10px 0px;
    background-color: #800000;

}
td {
    background-color: #ffa500;
    min-width: 50px !important;
}

.container {
  padding-right: 100px !important;
  overflow: auto;
}

试试这个JsFiddle

Answer 4

正如Umar A.的答案中所提到的，你使用填充作为填充：10px 0px 10px 0px;这意味着，填充顶部和底部是10px，填充左右是0px;用它作为填充：10px，如果你想要它的所有方面。

但是，这是提到的例子，看起来你不想要填充。实际上，您需要将margin-right作为空格应用于表格的右侧。即使您设置了保证金权利值，也不会产生影响。

它发生了，因为布局宽度是> 100％，element + margin-right现在超出视口范围，并且表格消耗完整的视口宽度。使视口小于100％并且存在边距。你给你的桌子宽度为200％。这是200％的什么？整个页面正文。所以，这意味着，您希望表是其父容器的200％。现在，像margin一样的东西应用于一个元素，并与其周围的元素（如父容器）进行比较。但是在右侧，元件尺寸超出了容器尺寸。因此，像margin这样的属性没有任何视觉效果。您可以在下面的代码段中看到它。我已将表格包装在div中以显示margin-right的应用。

＆＃13;

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

＆＃13;

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

＆＃13;

但是当你将表的宽度设置为小于100％时，margin-right将与其周围元素相比开始应用。因为现在，表格+ margin-right＆lt;文档正文的宽度，默认为窗口视口的100％。因此，您可以通过将表包装在div等块级元素中来创建您想要实现的效果，并允许它占用div的扩展。给它相对定位，然后定义它应该从右侧放置5px。如果您同时指定left，则left将向右覆盖。

Another reference

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

您无法使用css将填充设置为表元素。只有td喜欢

table td {padding: 10px;}

Answer 6

尝试仅使用padding-right：12px; 我认为这将有效

html表格宽度＆gt;页面宽度右边填充不起作用

6 个答案: