Question

我有一个用div创建的表，而不是<table>。我认为我做得很好，但我想＆＃34; colspan＆＃34;两个div。我为你创建了一个fiddle。

<div class='table'>
  <div class='tr'>
   <div class='td'>Vorname:</div>
   <div class='td'><input type='text' name='vorname' placeholder='Max' required='required'></div>
  </div>
  <div class='tr_placeholder'>
   Hauptwohnsitz:
  </div>
  <div class='tr'>
   <div class='td'>Stra&szlig;e &amp; Hausnummer:</div>
   <div class='td'><input type='text' name='strasse0' placeholder='Musterstra&szlig;e 15' required='required'></div>
  </div>
 </div>

tr_placeholder应该有一个＆＃34; colspan = 2＆＃34;但由于colspan是一个表格html属性，我无法在css中使用它。那么有可能操纵我的CSS它有效吗？这是我的实际课程：

.tr_placeholder{
display:table-row;
vertical-align:middle;
text-align:center;
border-bottom:1px dotted #000000;
width:400px;
}

解决方案应 Javascript free ！

Answer 1

我相信你想要完成的事情可以通过放弃＆＃34; table＆＃34;并且只使用常规HTML。试试这个：

<style>
    label {
        display: inline-block;
        width: 200px;
    }
</style>
<form>
    <h2>Section heading here</h2>
    <div class="form-group">
        <label>Vorname:</label>
        <input type="text" name="vorname" placeholder="Max" required="required"/>
    </div>

    <h2>Hauptwohnsitz</h2>
    <div class="form-group">
        <label>Stra&szlig;e &amp; Hausnummer:</label>
        <input type="text" name="strasse0" placeholder="Musterstra&szlig;e 15" required="required"/>
    </div>
</form>

Answer 2

您可以尝试为每一行生成一个额外的单元格，并在其顶部的绝对位置设置.tr_placeholder： http://jsfiddle.net/ZN8de/2/

.table {
    display:table;
    border-collapse:collapse;
}
.tr {
    display:table-row;

}
.tr:before {
    display:table-cell;
    content:'';
    width:100px;
}
.td {
    display:table-cell;
    width:200px;
    vertical-align:middle;
}
.tr_placeholder {
    vertical-align:middle;
    text-align:center;
    width:100px;
    position:absolute;
    background:white;
        border-top:1px dotted #000000;
}
.tr_placeholder:before {
    display:none;
}

以td显示的div为中心

2 个答案: