代码之家 › 专栏 › 技术社区 › waiwai933

表溢出到Div之外

html-table css html

waiwai933 · 技术社区 · 15 年前

我试图阻止显式声明了宽度的表在其父表之外溢出 div . 我想我可以通过使用 max-width ,但我似乎无法让它工作。

以下代码(窗口非常小)将导致此问题:

<style type="text/css">
  #middlecol {
    width: 45%;
    border-right:2px solid red;
  }
  #middlecol table {
    max-width:100% !important;
  }
</style>

<div id="middlecol">
  <center>
    <table width="400" cellpadding="3" cellspacing="0" border="0" align="center">
      <tr>
        <td bgcolor="#DDFFFF" align="center" colspan="2">
          <strong>Notification!</strong>
        </td>
      <tr>
        <td width="50">
          <img src="http://www.example.com/img.png" width="50" height="50" alt="" border="0">
        </td>
        <td>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </td>
      </tr>
    </table>
  </center>
 </div>

红线是地图的右边框 ,如果将浏览器窗口变小,则会发现该表不适合它。

7 回复 | 直到 4 年前

bluish dmajkic 12 年前

通过执行以下操作来扭转局面:

<style type="text/css">
  #middlecol {
    border-right: 2px solid red;
    width: 45%;
  }

  #middlecol table {
    max-width: 400px;
    width: 100% !important;
  }
</style>

此外,我建议您:

不使用 center
不要使用 width bgcolor 宽度 和 background-color )

233

James Lawruk 14 年前

您可以使用 table-layout:fixed .

下面的CSS将使您的表扩展到周围div的宽度。

table 
{
    table-layout:fixed;
    width:100%;
}

here .

bluish dmajkic 12 年前

一个粗糙的工作环境是设置 display: table 在包含的div上。

Mr. Doomsbuster 9 年前

我尝试了上面提到的所有解决方案,但没有成功。我有三张桌子,一张在另一张下面。最后一个溢出了。我用以下方法修复了它:

/* Grid Definition */
table {
    word-break: break-word;
}

对于处于边缘模式的IE11,需要将其设置为 word-break:break-all

Sander Koedood 10 年前

起初我使用詹姆斯·劳鲁克的方法。然而,这改变了所有的宽度 td

我的解决办法是使用 white-space: normal white-space: nowrap ). 这样,文本将始终中断。使用 word-wrap: break-word 将确保在需要时一切都会中断,即使是一句话讲到一半。

CSS将如下所示:

td, th {
    white-space: normal; /* Only needed when it's set differntly somewhere else */
    word-wrap: break-word;
}

换行:打断单词 可能会让你桌上的字难以辨认。不过,它会使您的桌子保持正确的宽度。

Waheed Asghar 7 年前

我几乎尝试了以上所有方法,但都不适用于我。。。下面的例子说明了这一点

word-break: break-all;

这将添加到父div(表的容器)上

Christian Heath 5 年前

overflow-x: auto;
overflow-y : hidden;

Kanab Paul 4 年前

div {
  border-style: solid;
  padding: 5px;
}

table {
  width: 100%;
  word-break: break-all;
  border-style: solid;
}

<div style="width:200px;">
  <table>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
      <th>Col 4</th>
      <th>Col 5</th>
    </tr>
    <tr>
      <td>data 1</td>
      <td>data 2</td>
      <td>data 3</td>
      <td>data 4</td>
      <td>data 5</td>
    </tr>
    <table>
</div>

Stokely 3 年前

如果表脱离了块级元素,请将容器转换为“内联块”。。。

div {
    display:inline-block;
}

这会把你的容器包在桌子上 ,不管它长得多大(您还可以将父容器设置为“display:table”,这将把您的表“嵌套”到另一个表中并包含它。记住,嵌套表在HTML中是允许的。)包装好后,您可以添加更多样式来控制容器的宽度并包含表的视图。限制扩展表并让用户仍能看到其所有内容的唯一方法是使用overflow:visible。下面,我还添加了要将其约束到的宽度。。。

 div {
    display:inline-block;
    overflow:scroll;
    width: 300px
}

请记住,所有表的单元格中最终都会有意外的内容,这些内容可能会脱离容器,或将表或页面宽度扩展到超出预期的程度。您不能阻止像这样意外增长的表,也不能计划该事件,除非您能够完全控制填充它们的内容的任何可能方面(这是罕见的)。但是您可以控制环绕它的父对象。

-3

bluish dmajkic 12 年前

有一个 width="400"