Центрирование тд-отображаемого div

Question

Центрирование тд-отображаемого div

0

У меня есть таблица, созданная с помощью div, а не с <table>. Я сделал это довольно хорошо, я думаю, но я хочу " colspan " два div. Я создал для тебя скрипку.

<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 должно быть значение "colspan = 2", но поскольку colspan является атрибутом html таблицы, я не могу использовать его в css. Так есть ли возможность манипулировать моим css, чтобы он работал? Это мой фактический класс:

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

Решение должно быть бесплатной javascript !

Lithilion 05 май 2014, в 21:07

Источник

Теги:

html

css

table

2 ответа

Ещё вопросы

JPRO · Answer 1 · 2014-05-05T17-28-00.000Z

Я считаю, что то, что вы пытаетесь выполнить, может быть сделано намного проще, если отказаться от идеи "таблицы" и просто использовать обычный 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>

G-Cyr · Answer 2 · 2014-05-05T17-05-00.000Z

Вы можете попытаться создать дополнительную ячейку для каждой строки и установить в качестве абсолютного положения верхний .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;
}