Как мне создать содержимое в HTML с помощью css

#html #css

#HTML #css

Вопрос:

Я пытаюсь создать overlaywindow с помощью html.
но я не могу создать элемент в элементе HTML, таком как таблица.
Я пытался использовать синтаксис полей, но он не работает
, результат отображается следующим
образом: в левой части элемента html есть таблица

введите описание изображения здесь

HTML элемент:

 var h3 = document.createElement('h3')
          var infoTitle = document.createTextNode('열수송관정보')
          h3.appendChild(infoTitle)
          cwContent.appendChild(h3)

          var cwTable = document.createElement('table')
          cwTable.className = 'infoTable'

          row = cwTable.insertRow(0)
          column = row.insertCell(0)
          column.innerHTML = '시공일자'
          column = row.insertCell(1)
          column.innerHTML = '2020-10-29'

          row = cwTable.insertRow(1)
          column = row.insertCell(0)
          column.innerHTML = '매설지역'
          column = row.insertCell(1)
          column.innerHTML = '성동구'

          row = cwTable.insertRow(2)
          column = row.insertCell(0)
          column.innerHTML = '등급'
          column = row.insertCell(1)
          column.innerHTML = 'A'

          row = cwTable.insertRow(3)
          column = row.insertCell(0)
          column.innerHTML = '길이'
          column = row.insertCell(1)
          column.innerHTML = '50m'

          row = cwTable.insertRow(4)
          column = row.insertCell(0)
          column.innerHTML = '직경'
          column = row.insertCell(1)
          column.innerHTML = '40A'

          cwContent.appendChild(cwTable)
  

Стиль:

 <style lang="scss">
.overlayBox {
  border-radius: 5px;
  text-align: center;
  border: 1px solid #333333;
  .infoTable .infoManholeTable .infoPipeStatusTable .infoPipeStatusTable {
    text-align: center;
    width: 100%;
    border: 1px solid #333333;
    border-collapse: collapse;
  }
  td {
        border: 1px solid #333333;
        border-collapse: collapse;
      }
}

</style>
  

Комментарии:

1. Я не совсем уверен, о чем вы спрашиваете, но вы можете использовать CSS Psuedo Elements для создания контента с помощью CSS w3schools.com/CSS/css_pseudo_elements.asp

2. вам нужны заголовки таблицы рядом? похожие jsfiddle.net/jhdkotLx/2 ?