Ik wil alleen een tabel maken met behulp van de <div>-tag en CSS.
Dit is mijn voorbeeldtabel.
<body>
<form id="form1">
<div class="divTable">
<div class="headRow">
<div class="divCell" align="center">Customer ID</div>
<div class="divCell">Customer Name</div>
<div class="divCell">Customer Address</div>
</div>
<div class="divRow">
<div class="divCell">001</div>
<div class="divCell">002</div>
<div class="divCell">003</div>
</div>
<div class="divRow">
<div class="divCell">xxx</div>
<div class="divCell">yyy</div>
<div class="divCell">www</div>
</div>
<div class="divRow">
<div class="divCell">ttt</div>
<div class="divCell">uuu</div>
<div class="divCell">Mkkk</div>
</div>
</div>
</form>
</body>
En stijl:
<style type="text/css">
.divTable
{
display: table;
width:auto;
background-color:#eee;
border:1px solid #666666;
border-spacing:5px;/*cellspacing:poor IE support for this*/
/* border-collapse:separate;*/
}
.divRow
{
display:table-row;
width:auto;
}
.divCell
{
float:left;/*fix for buggy browsers*/
display:table-column;
width:200px;
background-color:#ccc;
}
</style>
Maar deze tabel werkt niet met IE7 en onder de versie. Geef uw oplossing en ideeën voor mij.
Bedankt.
Antwoord 1, Autoriteit 100%
.div-table {
display: table;
width: auto;
background-color: #eee;
border: 1px solid #666666;
border-spacing: 5px; /* cellspacing:poor IE support for this */
}
.div-table-row {
display: table-row;
width: auto;
clear: both;
}
.div-table-col {
float: left; /* fix for buggy browsers */
display: table-column;
width: 200px;
background-color: #ccc;
}
Runnable Snippet:
Antwoord 2, Autoriteit 32%
divs mag niet worden gebruikt voor tabelgegevens. Dat is net zo verkeerd als het gebruik van tabellen voor lay-out.
Gebruik een <table>. Het is gemakkelijk, semantisch correct, en je zult binnen 5 minuten gedaan worden.
Antwoord 3, Autoriteit 4%
Dit is een oude draad, maar ik dacht dat ik mijn oplossing moest plaatsen. Ik werd onlangs geconfronteerd met hetzelfde probleem en de manier waarop ik heb opgelost, is door een driemappenbenadering te volgen zoals uiteengezet onder die heel eenvoudig is zonder complex CSS .
(Opmerking: natuurlijk, voor moderne browsers, met behulp van de waarden van tabel- of tabelrij- of tabelcel voor weergave CSS-kenmerk het probleem oplossen. Maar de benadering die ik gebruikte, zal sindsdien even goed werken in moderne en oudere browsers sindsdien Het gebruikt deze waarden niet voor weergave CSS-attribuut.)
3-stappen eenvoudige aanpak
Alleen voor tabel met divs, zodat u cellen en rijen krijgt, zoals in een tabelelement, gebruikt u de volgende aanpak.
- Vervang tabelelement door een blok-div (gebruik een
.tableklasse) - Vervang elk tr- of th-element door een blok-div (gebruik een
.rowklasse) - Vervang elk td-element door een inline block div (gebruik een
.cellklasse)
.table {display:block; }
.row { display:block;}
.cell {display:inline-block;} <h2>Table below using table element</h2>
<table cellspacing="0" >
<tr>
<td>Mike</td>
<td>36 years</td>
<td>Architect</td>
</tr>
<tr>
<td>Sunil</td>
<td>45 years</td>
<td>Vice President aas</td>
</tr>
<tr>
<td>Jason</td>
<td>27 years</td>
<td>Junior Developer</td>
</tr>
</table>
<h2>Table below is using Divs only</h2>
<div class="table">
<div class="row">
<div class="cell">
Mike
</div>
<div class="cell">
36 years
</div>
<div class="cell">
Architect
</div>
</div>
<div class="row">
<div class="cell">
Sunil
</div>
<div class="cell">
45 years
</div>
<div class="cell">
Vice President
</div>
</div>
<div class="row">
<div class="cell">
Jason
</div>
<div class="cell">
27 years
</div>
<div class="cell">
Junior Developer
</div>
</div>
</div>Antwoord 4
Als er iets is in <table>je houdt niet van, misschien kun je Reset bestand ?
of
Als u dit nodig hebt voor de lay-out van de pagina Bekijk de CSSPLAY Layout-voorbeelden voor Websites ontwerpen zonder tabellen.
Antwoord 5
Ik zie geen antwoord overweegt raster-CSS. Ik denk dat het een zeer elegante aanpak is: Grid-CSS ondersteunt zelfs rijspanne en kolomspannen. Hier vindt u een zeer goed artikel:
https://medium.com/ @ JS_TUT / CSS-RID-TUTORIAL-INVULLING-IN-DE-GAPS-C596C9534611
Antwoord 6
Een beetje off-topic, maar kan iemand helpen voor een schonere html …
CSS
.common_table{
display:table;
border-collapse:collapse;
border:1px solid grey;
}
.common_table DIV{
display:table-row;
border:1px solid grey;
}
.common_table DIV DIV{
display:table-cell;
}
HTML
<DIV class="common_table">
<DIV><DIV>this is a cell</DIV></DIV>
<DIV><DIV>this is a cell</DIV></DIV>
</DIV>
Werkt in Chrome en Firefox
Antwoord 7
Gebruik het juiste documenttype; het zal het probleem oplossen. Voeg de onderstaande regel toe aan de bovenkant van uw HTML-bestand:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Antwoord 8
Bij het maken van een aangepaste set lay-outtags vond ik een ander antwoord op dit probleem. Hier vindt u de aangepaste set tags en hun CSS-klassen.
HTML
<layout-table>
<layout-header>
<layout-column> 1 a</layout-column>
<layout-column> </layout-column>
<layout-column> 3 </layout-column>
<layout-column> 4 </layout-column>
</layout-header>
<layout-row>
<layout-column> a </layout-column>
<layout-column> a 1</layout-column>
<layout-column> a </layout-column>
<layout-column> a </layout-column>
</layout-row>
<layout-footer>
<layout-column> 1 </layout-column>
<layout-column> </layout-column>
<layout-column> 3 b</layout-column>
<layout-column> 4 </layout-column>
</layout-footer>
</layout-table>
CSS
layout-table
{
display : table;
clear : both;
table-layout : fixed;
width : 100%;
}
layout-table:unresolved
{
color : red;
border: 1px blue solid;
empty-cells : show;
}
layout-header, layout-footer, layout-row
{
display : table-row;
clear : both;
empty-cells : show;
width : 100%;
}
layout-column
{
display : table-column;
float : left;
width : 25%;
min-width : 25%;
empty-cells : show;
box-sizing: border-box;
/* border: 1px solid white; */
padding : 1px 1px 1px 1px;
}
layout-row:nth-child(even)
{
background-color : lightblue;
}
layout-row:hover
{ background-color: #f5f5f5 }
De sleutel om lege cellen en cellen in het algemeen de juiste grootte te geven, is Box-Sizing en Padding. Rand doet hetzelfde, maar maakt een lijn in de rij. Opvulling niet. En hoewel ik het niet heb geprobeerd, denk ik dat Margin op dezelfde manier zal werken als Padding, bij het forceren en leegmaken van cellen om correct te worden weergegeven.