создавая ту же самую вещь с divs как таблицы - html


1

Я начал изучать CSS более глубоко и решил, что хочу конвертировать мой сайт html, который в основном состоит из таблиц в div.

Я пытаюсь сделать то же самое с divs, как с таблицами на этой тестовой странице. Но у меня есть несколько проблем:

  • Не удалось создать столбцы
  • Вертикальное выравнивание текста

Как далеко я получил:  table vs div

код:

 <style type="text/css">


body {
background-color:#000;
}


 /* TABLE CSS */
 td {
    font-family: Tahoma; 
    font-size: 12px;

}
.line {
   border-collapse:separate;
   border:1px solid #222222;
   border-spacing:1px 1px;
   margin-left:auto;
   margin-right:auto;
   background-color: #000000;
   padding: 1px;
   width:400px;

}
.topic {
    background-color:#3C0;
    font-weight: bold;
    height: 23px;
    color:#FFF;
    text-align:center;
}
.row {
    background-color: #111111;

    border-bottom: 1px solid black;
    color: #ffffff;
    height:12px;
    line-height:21px;
    padding:0px; 
}
.row:Hover {
    background-color: #252525;
}

/* DIV CSS */
div.line {
   border-collapse:separate;
   border:1px solid #222222;
   border-spacing:1px 1px;
   align:center;
   background-color: #000000;
   padding: 1px;
   width:400px;

}
div.topic {
    background-color:#3C0;
    font-family: Tahoma; 
    font-size: 12px;
    height: 23px;
    font-color:#FFF;
    text-align:center;

 }
div.row {
    background-color: #111111;
    border-bottom: 1px solid black;
    color: #ffffff;
    padding:6px; 
    font-family: Tahoma;
    font-size:12px;

}

div.row:Hover {
    background-color: #252525;
}

</style>
<body>


<table class="line">
  <tbody>
    <tr>
      <td class="topic" colspan="3">Table</td>
    </tr>
    <tr class="row">
      <td width="20%" align="left">Test</td>
      <td width="20%" align="center">1</td>
    </tr>
    <tr class="row">
      <td align="left">Test</td>
      <td align="center">2</td>
    </tr>
  </tbody>
</table>
 <p>
 <div class="line">
 <div class="topic">Div</div>
 <div class="row">Test</div><div class="row">1</div>
 <div class="row">Test</div><div class="row">2</div>
 </div>
</p>
  •  14
  •  5
  • 8 фев 2020 2020-02-08 08:05:14

5 ответов

0

Посмотрите на свойство отображения css.

.line {
display: table;
}

.row {
display: table-cell;
}

Но вы должны получить некоторые проблемы с Internet Explorer. В этом случае вы можете использовать display: inline; с увеличением: 1;

  • 8 фев 2020 2020-02-08 08:05:15
0

Поместить float: left; по этому классу:   div.row

  • 8 фев 2020 2020-02-08 08:05:15
1
  • Получите хорошую книгу - я рекомендую CSS: Отсутствующее руководство (Missing Manuals)

  • найдите float длинный с display esp relative

  • 8 фев 2020 2020-02-08 08:05:15
5

Хорошо видеть, что вы конвертируете table в div s, однако убедитесь, что вы делаете это только там, где это необходимо.

Если данные на странице являются табличными, то имеет смысл, чтобы это было помещено в элемент table.

div предназначены для компоновки и структуры, table предназначены для отображения табличных данных.

Мой колледж когда-то проводил время, создавая форум из divs, который следовал за структурой таблицы. Это было все, потому что ему сказали, что "таблицы плохие, используйте divs и CSS". Важно помнить, что это относится только к структуре компоновки.

Если в вашей структуре есть строки и столбцы, используйте таблицу. таблицы остаются действительными полезными HTML-элементами и далеки от устаревших.

  • 8 фев 2020 2020-02-08 08:05:14
1

Здесь вы идете:

HTML:

<div id="wrap">
    <h2> Div </h2>
    <div class="section">
        <div> Test </div>
        <div> 1 </div>
    </div>
    <div class="section">
        <div> Test </div>
        <div> 2 </div>
    </div>
</div>

CSS

#wrap {
    border: 2px solid #333;
    padding: 2px;
}

h2 {
    background: green;
    color: white;
    text-align: center;
    font-weight: bold;
    padding: 4px 0;
}

.section {
    overflow: auto;
    margin-top: 2px;
}

.section > div {
    float:left;
    width: 50%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    background-color: #333;
    color: white;
    padding: 4px 0;
}

.section > div + div {
    text-align: center;
    border-left: 2px solid black;
}

Живая демонстрация: http://jsfiddle.net/jNQrM/1/