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

HTML表格大于浏览器的窗口

html

ibz · 技术社区 · 17 年前

<table>
  <tr>
    <td><nobr>hello</nobr></td>
    <td>this column can contain a lot of text, for some rows</td>
    <td><nobr>world</nobr></td>
    <td><nobr>hello world</nobr></td>
  </tr>
  ... more rows to come
</table>

基本上,其中3列有非常短的文本,我希望它们是 <nobr> . 另一个可以有很长的文本,我希望它占用所有剩余的空间。但实际情况是,为了容纳较大的列,表变得比整个浏览器窗口都大。如果文本是 真正地 虽然它最终会破裂,但它还是有点脱离了窗户。

3 回复 | 直到 17 年前

Narayan Raman 17 年前

你的例子确实和Zyphrax说的一样好。

只有在长列中有一个非常大的单词或内容中没有空格时,才会出现您报告的问题。是这样吗?可能是您正在使用的   而不是空格,它阻止了浏览器自动执行的正常换行。

如果列中的文本根本没有换行,则通常使用   或者你忘了关窗户 <nobr>

不确定这是否有帮助。

Yvo 17 年前

我刚刚把它放进了我的浏览器(试过IE8和Firefox)。它在浏览器窗口中保持良好:

<html>
 <body>
  <table>
   <tr>
    <td><nobr>hello</nobr></td>
    <td>this column can contain a lot of text, for some rows.</td>
    <td><nobr>world</nobr></td>
    <td><nobr>hello world</nobr></td>
   </tr>
  </table>
 </body>
</html>

否则你可能会想试试像这样的把戏 宽度:100% 保证金:0自动; 在桌子上。

Dan Diplo 17 年前

你不应该使用nobr标签,它是不有效的HTML标记。使用“ white-space: nowrap “取而代之的是CSS。

如。

<td style="white-space:nowrap">your long text</td>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前