Html 表和父div之间的关系_Html_Css

Html 表和父div之间的关系

html css

Html 表和父div之间的关系,html,css,Html,Css,所以我在一个div里面有一个表，我没有指定任何宽度。对于包含大量内容的表，表宽度似乎超过父div的宽度。为什么会发生这种情况？如何使表格宽度始终占父div的某个百分比？设置表格的百分比宽度，并确保CSS没有在其他地方声明div的宽度。仔细检查HTML以确保正确嵌套了表并关闭了div标记。大概是这样的： <!DOCTYPE html> <html> <head> <title>Whatever</title> </h

所以我在一个div里面有一个表，我没有指定任何宽度。对于包含大量内容的表，表宽度似乎超过父div的宽度。为什么会发生这种情况？如何使表格宽度始终占父div的某个百分比？

设置表格的百分比宽度，并确保CSS没有在其他地方声明div的宽度。仔细检查HTML以确保正确嵌套了表并关闭了div标记。大概是这样的：

<!DOCTYPE html>
<html>
  <head>
    <title>Whatever</title>
  </head>
  <body>
    <div>
      <table><!--all your table stuffs--></table>
    </div>
  </body>
</html>

类是解决这个问题的更好方法，但是上面的代码将确保div是页面宽度的90%，而表是div宽度的90%（允许边距、填充等）

CSS是你的朋友

<table style="table-layout:fixed">

这将确保table元素在宽度上而不是内容上拥有最终发言权

强制性填鸭示例：

<style>
#sampleTable { 
    table-layout:fixed;
    width:80%;

    background-color:#99F;
 }

#container { 
    width:500px;

    background-color:#F99;
 }
</style>

<div id="container">
    <table id="sampleTable">
        <tr><td>Exampleofreallylongtextwhichshouldbreaklayoutnormally</td></tr>
    </table>
</div>


#可抽样{
表布局：固定；
宽度：80%；
背景色：#99F；
}
#容器{
宽度：500px；
背景色：#F99；
}
RELLYLONGTEXT的示例，通常应中断布局

在该示例中，表格应始终为400像素（父级500px的80%）。填充、边距等的典型警告仍然适用

你可能还想考虑<代码>单词包装> />代码> <代码>溢出>代码>以确定如何处理通常会推导出表大小的内容。

是否将你的div声明为浮点？我建议提供更多关于你已经尝试过的信息，例如，你试图完成的任务的草图。你可能在不知不觉中问错了问题，你能提供的信息越多，你得到的答案就越好。内联CSS是你的敌人；）这是一个快速提问的快速示例。这就是我想要的。感谢如果所包含元素的内容没有中断（如连续文本的长行、大图像等），上述代码将无法工作。您需要设置

表格布局

，默认设置为

自动

。

<style>
#sampleTable { 
    table-layout:fixed;
    width:80%;

    background-color:#99F;
 }

#container { 
    width:500px;

    background-color:#F99;
 }
</style>

<div id="container">
    <table id="sampleTable">
        <tr><td>Exampleofreallylongtextwhichshouldbreaklayoutnormally</td></tr>
    </table>
</div>