当宽度设置为100％时，如何获得Html表格以重视边距？

我挣扎着爬一个HTML表格填充容器的宽度和尊重利润率不会溢出。当宽度设置为100％时，如何获得Html表格以重视边距？

此示例（请参阅https://jsfiddle.net/v6o12u9o/）将表格的宽度设置为100％，但由于边距的原因，该表格会溢出其父边界。我该如何解决？

HTML：

<div style="border: 1px solid red; margin:10px;"> 
<table border=1> 
    <tr> 
     <td> 
      First cell. 
     </td> 
     <td> 
      Second cell. 
     </td> 
    </tr> 
</table> 
</div>

的CSS：

table { 
    margin: 20px; 
    background-color: yellow; 
    width:100%; 
} 

td { 
    width: 50%; 
}

其他有些事情我已经试过：

设置保证金的权利40PX。保证金 - 权利被忽略。
设置填充右代替。这使得单元格更小，但表格保持100％的宽度。
设置表的显示为“块”。这使得表中的正确尺寸，但随后细胞是太小了（我试过设置“块”上的细胞，没有运气）

来源

2015-11-10 willem

这是你想要的吗？ https://jsfiddle.net/v6o12u9o/3/ – AtheistP3ace

如果你想表是100％，你可以做到这一点，弥补在边缘左，右移动，要填充父：

CSS：

.tableElement { 
    margin: 20px auto; 
    background-color: yellow; 
    width: 100%; 
} 

.tableCell { 
    width: 50%; 
} 

.tableWrapper { 
    border: 1px solid red; 
    margin: 10px; 
    padding: 0 20px; 
}

HTML：

<div class="tableWrapper"> 
    <table class="tableElement" border="1"> 
     <tr> 
      <td class="tableCell">First cell.</td> 
      <td>Second cell.</td> 
     </tr> 
    </table> 
</div>

小提琴：https://jsfiddle.net/v6o12u9o/5/

来源

2015-11-10 17:58:28 AtheistP3ace

好，简单，谢谢。 – willem

如果设置width: 100%和margin: 20px孩子会溢出。尝试设置上只有顶部和底部边缘和限制width 90％。它会在你的例子中完成同样的事情。

由于margin-left和margin-right设置为auto，它也将居中在父代中。

table { 
     margin: 20px auto 20px auto; 
     background-color: yellow; 
     width: 90%; 
    }

来源

2015-11-10 17:54:10 Halycon

这工作正常，但我认为我更喜欢其他答案的填充建议，我可以更精确一点，然后像素数量。感谢你的回答。 – willem

看到其他答案后，我同意你的评价。 :) – Halycon

你可以试试这个，如果你想让它更宽，你可以改变表格样式的宽度。我希望这是你想要的。

table { 
    margin-top:10px; 
    margin-bottom:10px; 
    margin-right:auto; 
    margin-left:auto; 
    background-color: yellow; 
    width:95%; 
}

来源

2015-11-10 17:57:11

最简单的方法就是显示该元素的显示模式。这迫使元素更加流畅。

.table { 
    display:block; 
    margin:20px auto; 
}

设置表格显示为阻止将使它填充它可用的空间，其余的你可以用CSS做颜色和样式。

来源

2015-11-10 18:00:00 MasterT

当我这样做时，单元格不再填满整个表格。奇怪。 – willem

这里就是我想你想：答案https://jsfiddle.net/v6o12u9o/4/

//uses padding instead of margin 
div { 
border: 1px solid red; 
} 

table { 
padding: 20px; 
width:100%; 

} 

tr { 
background-color: yellow; 

} 

td { 
width:50%; 
}

来源

2015-11-10 18:01:20 Cruiser

负载，但我想我会把我的解决方案也。我改变了CSS，而不是有一个保证金表，div包装有填充，而表行被设置为100％。

div { 
    padding: 10px;  
} 
table { 
    background-color: yellow; 
    width:100%; 
} 
tr { 
    width: 100%; 
}

来源

2015-11-10 18:39:54

当宽度设置为100％时，如何获得Html表格以重视边距？

回答

相关问题