HTML-дизайн - заменить таблицу на div

У меня есть определенный дизайн, который мне нужно полностью реализовать с помощью тегов <div>, но я не могу этого сделать, хотя я достиг этого с помощью тегов <table>, которые необходимо заменить. Запросить экспертизу. Ниже представлен дизайн:

Ниже приведен код, с которым я пытался и боролся:

<div>
  <div class = "row">
    <div class = "col">
      <input type = "label" value = "fees">
    </div>
    <div class = "col">
      <input type = "label" value = "1,258">
    </div>
  </div>
  <div class = "row">
    <div class = "col">
      <input type = "label" value = "cost">
    </div>
    <div class = "col">
      <input type = "label" value = "200">
    </div>
  </div>
  <div class = "row">
    <div class = "col">
      <input type = "label" value = "Grand Total">
    </div>
    <div class = "col">
      <input type = "label" value = "1,458">
    </div>
  </div>
</div>

Только html, вы не добавляете css?

— 19.02.2019 07:38

jquery html css

19.02.2019 07:37

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Используйте этот код ниже и примените css, как хотите...

.divTable{
	display: table;
	width: 400px;;
}
.divTableRow {
	display: table-row;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
}
.divTableCell, .divTableHead {
	border: 0;
	display: table-cell;
	padding: 3px 10px;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
	font-weight: bold;
}
.divTableFoot {
	background-color: #EEE;
	display: table-footer-group;
	font-weight: bold;
}
.divTableBody {
	display: table-row-group;
}

    <div class = "divTable">
        <div class = "divTableBody">
            <div class = "divTableRow">
                <div class = "divTableCell" style = "text-align:right;">&nbsp;Fees</div>
                <div class = "divTableCell">&nbsp;1258</div>
            </div>
            <div class = "divTableRow">
                <div class = "divTableCell" style = "text-align:right;">&nbsp;Cost</div>
                <div class = "divTableCell">&nbsp;20k</div>
            </div>
            <div class = "divTableRow">
                <div class = "divTableCell" style = "text-align:left; border-top: 1px solid #000;">&nbsp;Grand Total</div>
                <div class = "divTableCell" style = "border-top: 1px solid #000;">&nbsp;1458</div>
            </div>
        </div>
    </div>

19.02.2019 07:51

Другие вопросы по теме

Скрыть div на основе отображения другого div

Как получить все данные в таблице html из базы данных, когда страница загружается с использованием php, ajax, jquery

JavaScript: выбранные имена файлов в массив JSON

Как закрыть веб-страницу самостоятельно по нажатию кнопки

Как выйти из системы, когда браузер закрыт в MVC?

Как добавить текст вместе с цветом в пользовательские формы, сделанные через холст?

TypeError: объект «NoneType» не является подписчиком веб-скраппинга python

ClipPath не работает, если я использую <path> внутри clipPath , но работает для <circle>

Почему мой html draggable не работает на сенсорном экране?

Динамические данные с API

HTML-дизайн - заменить таблицу на div

Ответы 1

Другие вопросы по теме

Похожие вопросы