我想将表单的一部分看起来像电子表格。有几种形式,<table>因此是不可行的(尽管您确实在打印语义上的表格数据,但我并不反对这种情况)。
<table>
因此,我尝试直接将CSS2.1布局直接与表单输入元素一起使用,例如。
<div class="table"> <form class="tbody"> <div class="tr"> <label class="td">Label</label> <input class="td" name /> <input class="td" name /> </div> </form> </div>
但是它看起来 display:table-cell 对<input>元素不起作用!
display:table-cell
<input>
如果您签入Chrome的“计算机样式”,则显示内容为“内联元素”。
任何的想法?
这听起来比在<div class="cell">周围放一些更好<input>,然后不得不玩盒子模型来使它看起来更好…
<div class="cell">
从W3.org:
“ CSS 2.1没有定义哪些属性适用于表单控件和框架,也没有定义如何使用CSS设置样式。用户代理可以将CSS属性应用于这些元素。建议作者将此类支持视为实验性的。CSS的未来级别可以进一步指定。”
抱歉,但是display: table-cell对input元素进行实验性处理。尽量避免这种情况,例如使用wrapper-elements进行定位。
display: table-cell
input
我用div元素做了一个例子。现在,一个表中可以有多个表单,但是仅在form元素跨满行时才起作用。否则,您的嵌套将被破坏。
div
form
编辑: 更新了小提琴与版本,其中border-collapse添加以避免双边框。
border-collapse