html – 如何将表放在内联块元素中,其中单元格具有百分比宽度

html – 如何将表放在内联块元素中,其中单元格具有百分比宽度,第1张

概述我想在容器内创建一个具有css样式“display:inline-block”的表.该表应该与此框中的其他内容一样宽,但不能更宽.我的例子中的表有3个单元格.第一个单元应该与其内部内容一样宽.第二个应该得到30%(可用宽度),第三个得到70%(可用宽度). 这适用于Firefox(它应该是这样的): 使用以下标记: <div> This text sets the width for th 我想在容器内创建一个具有CSS样式“display:inline-block”的表.该表应该与此框中的其他内容一样宽,但不能更宽.我的例子中的表有3个单元格.第一个单元应该与其内部内容一样宽.第二个应该得到30%(可用宽度),第三个得到70%(可用宽度).

这适用于firefox(它应该是这样的):

使用以下标记:

<div>    This text sets the wIDth for the display: inline-block container.<br />    table should not get wIDer than this.    <table>        <tr>            <td>Small</td>            <td wIDth="30%">30%</td>            <td wIDth="70%">70%</td>        </tr>    </table></div>

和CSS:

div { display: inline-block; }table { wIDth: 100%; }td { background-color: green; }

(小提琴:http://jsfiddle.net/SuperNova3000/Z7Car/)

例如,Chrome将使用上面的示例失败(表格的宽度为100%Cellspacings,窗口宽度更宽).在IE10中,表格将获得100%(没有cellspacings).

有没有办法完成这项任务?它不是网站的布局,而是适用于应该灵活的公式容器(添加更多“小”行,具有其他百分比值).这是一个简化版本.

我正在寻找适用于每个浏览器的PLAIN HTML和CSS解决方案.

将表格单元格更改为:

<td wIDth="1">Small</td><td>30%</td><td>70%</td>

创建一个尊重“小”单元格的布局.但我看不出任何方法可以让30%/ 70%的列工作.有什么建议?

解决方法 如何使用div {inline-table}而不是div {inline-block}

见http://jsfiddle.net/Z7Car/3/

总结

以上是内存溢出为你收集整理的html – 如何将表放在内联块元素中,其中单元格具有百分比宽度全部内容,希望文章能够帮你解决html – 如何将表放在内联块元素中,其中单元格具有百分比宽度所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1065242.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-26
下一篇 2022-05-26

发表评论

登录后才能评论

评论列表(0条)

保存