草庐IT

html - 表格边框折叠不适用于内联 block ？

coder 2023-08-07 原文

此示例以两种不同的方式显示两个表。在第一种情况下，一张 table 在另一张 table 上方。在第二个中，它们并排。两种情况之间的唯一区别是一个使用 display: inline-block ;此外，在第一种情况下，表格由 <DIV> 分隔用padding-bottom , 在第二个中，它们由 <SPAN> 分隔用padding-right .

<HTML>
<HEAD>
   <TITLE>Title</TITLE>
   <STYLE type="text/css">
   table { border-collapse: collapse; border-style: solid; border-width: thin }
   col { border-style: dotted; border-width: thin } 
   td { padding-left: 0.05in; padding-right: 0.05in }
   </STYLE>
</HEAD>
<BODY>
   <TABLE>
   <COL><COL><COL><COL><COL><COL>
   <TR><TD>x<TD>x<TD>x<TD>x<TD>x<TD>x</TABLE>
   <DIV style="padding-bottom: 1em"></DIV>
   <TABLE>
   <COL><COL><COL><COL><COL><COL>
   <TR><TD>y<TD>y<TD>y<TD>y<TD>y<TD>y</TABLE>

   <DIV style="padding-bottom: 3em"></DIV>

   <TABLE style="display: inline-block">
   <COL><COL><COL><COL><COL><COL>
   <TR><TD>x<TD>x<TD>x<TD>x<TD>x<TD>x</TABLE>
   <SPAN style="padding-right: 3em"></SPAN>
   <TABLE style="display: inline-block">
   <COL><COL><COL><COL><COL><COL>
   <TR><TD>y<TD>y<TD>y<TD>y<TD>y<TD>y</TABLE>
</BODY>
</HTML>

CSS2 的 17.6.2.1规范说明了如何解决折叠边界模型中的边界冲突:

If none of the styles are 'hidden' and at least one of them is not 'none', then narrow borders are discarded in favor of wider ones. If several have the same 'border-width' then styles are preferred in this order: 'double', 'solid', 'dashed', 'dotted', 'ridge', 'outset', 'groove', and the lowest: 'inset'.

这似乎适用于第一种情况，实线边框胜过虚线边框，围绕着表格的边缘。但在第二种情况下，看起来两个 边界都出现了，也许相隔一个像素。

截图:

我在 Chrome 37.0 和 IE11 中都观察到这种行为。

浏览器错误，还是 CSS 功能？有没有办法让它在 inline-block 中正常工作？案例？

注意:消除 HTML 标签之间的所有空白没有帮助。

最佳答案

就其值(value)而言，要使其正常工作，请使用 inline-table 而不是 inline-block

FIDDLE

另外，我不认为你应该设置一个表格元素除了

display:table , display:inline-table (或 display:none - 如有必要)

-- 否则事情一定会变得一团糟，因为您要告诉表格不再像表格那样工作。

关于html - 表格边框折叠不适用于内联 block ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25861324/

内联blockgtltcodehtmlcsshtml-table

有关html - 表格边框折叠不适用于内联 block ？的更多相关文章

  1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  2. ruby-on-rails - Rails 常用字符串(用于通知和错误信息等) - 2

    大约一年前，我决定确保每个包含非唯一文本的Flash通知都将从模块中的方法中获取文本。我这样做的最初原因是为了避免一遍又一遍地输入相同的字符串。如果我想更改措辞，我可以在一个地方轻松完成，而且一遍又一遍地重复同一件事而出现拼写错误的可能性也会降低。我最终得到的是这样的:moduleMessagesdefformat_error_messages(errors)errors.map{|attribute,message|"Error:#{attribute.to_s.titleize}#{message}."}enddeferror_message_could_not_find(obje

  3. ruby - RSpec - 使用测试替身作为 block 参数 - 2

    我有一些Ruby代码，如下所示:Something.createdo|x|x.foo=barend我想编写一个测试，它使用double代替block参数x，这样我就可以调用:x_double.should_receive(:foo).with("whatever").这可能吗？ 最佳答案 specify'something'dox=doublex.should_receive(:foo=).with("whatever")Something.should_receive(:create).and_yield(x)#callthere

  4. 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的路径中定义。这

  5. 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并在看到包时选择

  6. ruby-on-rails - Enumerator.new 如何处理已通过的 block ？ - 2

    我在理解Enumerator.new方法的工作原理时遇到了一些困难。假设文档中的示例:fib=Enumerator.newdo|y|a=b=1loopdoy[1,1,2,3,5,8,13,21,34,55]循环中断条件在哪里，它如何知道循环应该迭代多少次(因为它没有任何明确的中断条件并且看起来像无限循环)？ 最佳答案 Enumerator使用Fibers在内部。您的示例等效于:require'fiber'fiber=Fiber.newdoa=b=1loopdoFiber.yieldaa,b=b,a+bendend10.times.m

  7. Ruby Sinatra 配置用于生产和开发 - 2

    我已经在Sinatra上创建了应用程序，它代表了一个简单的API。我想在生产和开发上进行部署。我想在部署时选择，是开发还是生产，一些方法的逻辑应该改变，这取决于部署类型。是否有任何想法，如何完成以及解决此问题的一些示例。例子:我有代码get'/api/test'doreturn"Itisdev"end但是在部署到生产环境之后我想在运行/api/test之后看到ItisPROD如何实现？ 最佳答案 根据SinatraDocumentation:EnvironmentscanbesetthroughtheRACK_ENVenvironm

  8. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

  9. ruby - 在匿名 block 中产生 - 2

    我没有理解以下行为(另请参阅inthisSOthread):defdef_testputs'def_test.in'yieldifblock_given?puts'def_test.out'enddef_testdoputs'def_testok'endblock_test=procdo|&block|puts'block_test.in'block.callifblockputs'block_test.out'endblock_test.calldoputs'block_test'endproc_test=procdoputs'proc_test.in'yieldifblock_gi

  10. ruby - inverse_of 是否适用于 has_many？ - 2

    当我使用has_one时，它​​工作得很好，但在has_many上却不行。在这里您可以看到object_id不同，因为它运行了另一个SQL来再次获取它。ruby-1.9.2-p290:001>e=Employee.create(name:'rafael',active:false)ruby-1.9.2-p290:002>b=Badge.create(number:1,employee:e)ruby-1.9.2-p290:003>a=Address.create(street:"123MarketSt",city:"SanDiego",employee:e)ruby-1.9.2-p290

随机推荐