html - 固定宽度的列表强制在容器上扩展

coder 2023-08-03 原文

显然是一个经典问题，但我发现的“解决方案”并没有奏效，包括关于 SO 的各种其他问题。

如果我的表格比它的容器宽，我希望我的表格单元格宽度保持固定，而不是调整大小以适应容器。

可重现的 HTML(<td> 由 PHP 生成):

<html>
  <head></head>

  <body>
    <table>
      <tr>
        <?php for($i=0;$i<15;$i++) { 
           echo "<td style='width:150px;border-right:1px solid black;'>".($i+1)."</td>"; 
        } ?>
      </tr>
    </table>
    <div style='background:chartreuse;width:150px'>This is 150px wide.</div>
  </body>
</html>

我尝试过的:

table-layout:fixed
span容器 display:inline-block设置
div带行内 block 的容器

看来应该有一个简单的方法可以让前面的代码生成一个溢出正文的表格。

有人可以帮忙吗？

编辑

我之前的写法可能看不太清楚，但是我想自己指定列宽。

我试图在不明确指定表格宽度的情况下执行此操作。只有 TD 会迫使 table 变宽，这(应该？)会迫使容器变宽。

此外，内联 CSS 仅用于示例目的。

最佳答案

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<div style="margin: 0pt auto; width: 980px;">
  <div style="500px;overflow:scroll">
    <table style="width: 100%; table-layout: fixed;">
      <tbody>
        <tr>
          <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
          <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
          <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
          <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
          <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
          <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
          <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
          <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
          <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
          <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
          <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
          <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
          <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
          <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
          <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
        </tr>
      </tbody>
    </table>
    <div style="background:chartreuse;width:150px">This is 150px wide.</div>
  </div>
</div>
</body>
</html>

关于html - 固定宽度的列表强制在容器上扩展，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7410321/

容器 html lt gt border-right css html-table width overflow

有关html - 固定宽度的列表强制在容器上扩展的更多相关文章

ruby - 使用 ruby 将 HTML 转换为纯文本并维护结构/格式 - 2
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。最佳答案首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
ruby - 使用 C 扩展开发 rubygem 时，如何使用 Rspec 在本地进行测试？ - 2
我正在编写一个包含C扩展的gem。通常当我写一个gem时，我会遵循TDD的过程，我会写一个失败的规范，然后处理代码直到它通过，等等......在“ext/mygem/mygem.c”中我的C扩展和在gemspec的“扩展”中配置的有效extconf.rb，如何运行我的规范并仍然加载我的C扩展？当我更改C代码时，我需要采取哪些步骤来重新编译代码？这可能是个愚蠢的问题，但是从我的gem的开发源代码树中输入“bundleinstall”不会构建任何native扩展。当我手动运行rubyext/mygem/extconf.rb时，我确实得到了一个Makefile(在整个项目的根目录中)，然后当
ruby - RVM 使用列表[0] - 2
是否有类似“RVMuse1”或“RVMuselist[0]”之类的内容而不是键入整个版本号。在任何时候，我们都会看到一个可能包含5个或更多ruby的列表，我们可以轻松地键入一个数字而不是X.X.X。这也有助于rvmgemset。最佳答案这在RVM2.0中是可能的=>https://docs.google.com/document/d/1xW9GeEpLOWPcddDg_hOPvK4oeLxJmU3Q5FiCNT7nTAc/edit?usp=sharing-知道链接的任何人都可以发表评论
ruby-on-rails - Rails HTML 请求渲染 JSON - 2
在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？最佳答案您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这
ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2
所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择
ruby-on-rails - Ruby url 到 html 链接转换 - 2
我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.
c - mkmf 在编译 C 扩展时忽略子文件夹中的文件 - 2
我想这样组织C源代码:+/||___+ext||||___+native_extension||||___+lib||||||___(Sourcefilesarekeptinhere-maycontainsub-folders)||||___native_extension.c||___native_extension.h||___extconf.rb||___+lib||||___(Rubysourcecode)||___Rakefile我无法使此设置与mkmf一起正常工作。native_extension/lib中的文件(包含在native_extension.c中)将被完全忽略。
ruby-on-rails - capybara ::ElementNotFound:无法找到 xpath "/html" - 2
我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'
ruby - 如何使用 Ruby 将 CSV 文件读入 HTML 表格？ - 2
我正在尝试将一个简单的CSV文件读入HTML表格以在浏览器中显示，但我遇到了麻烦。这就是我正在尝试的:Controller:defshow@csv=CSV.open("file.csv",:headers=>true)end查看:输出:NameStartDateEndDateQuantityPostalCode基本上我只获取标题，而不会读取和呈现CSV正文。最佳答案这最终成为最终解决方案:Controller:defshow#OpenaCSVfile,andthenreaditintoaCSV::Tableobjectforda
ruby - 在 Ruby 中将整数格式化为固定长度的字符串 - 2
有没有一种简单的方法可以将给定的整数格式化为具有固定长度和前导零的字符串？#convertnumberstostringsoffixedlength3[1,12,123,1234].map{|e|???}=>["001","012","123","234"]我找到了解决方案，但也许还有更聪明的方法。format('%03d',e)[-3..-1] 最佳答案如何使用%1000而不是进行字符串操作来获取最后三位数字？[1,12,123,1234].map{|e|format('%03d',e%1000)}更新:根据theTinMan的

html - 固定宽度的列表强制在容器上扩展

有关html - 固定宽度的列表强制在容器上扩展的更多相关文章

随机推荐