Wie erstellen Sie eine Rechteck-Tabelle, die mit einer Farbe mit HTML/CSS gefüllt ist?

-1

Ich habe versucht, eine Tabelle mit gefüllten Farben zu erstellen, und ich habe den folgenden Code verwendet, aber ich erhalte einen Fehler. Kann mir jemand dabei helfen? Danke im Voraus für Ihre Hilfe.Wie erstellen Sie eine Rechteck-Tabelle, die mit einer Farbe mit HTML/CSS gefüllt ist?

<td> 
    <div style="background-color: #2E21FF; width:500px;height:100px;border:1px solid #000; padding:0;margin:0;">This is a rectangle!</div> 
</td>

Quelle

2016-07-15 San

Welchen Fehler bekommen Sie? Anders als nur einen Teil des Codes für eine vollständige Tabelle zu veröffentlichen, scheint der Div-Code in Ordnung zu sein. – j08691

Welchen Fehler bekommen Sie? Der Code, den Sie in Ihrer Frage angegeben haben, funktioniert einwandfrei: https://jsfiddle.net/ts913p0v/ – Shaggy

Sie müssen

und Tags deklarieren, dann verschachteln Sie . Ihr Code ist für eine Tabelle unvollständig. –

Antwort

<td> wird mit einer Klassen-Farbbox anders formatiert und alle Farben werden dann separat mit ihren Klassen behandelt. Unten ist ein Beispiel.

.color-box span { 
    border: 1px solid rgb(204, 204, 204); 
    padding: 2px; 
    padding-left: 25px; 
    margin: 0px; 
    margin-right: 10px; 
    border-radius: 3px; 
} 
.color-box { 
    border: 1px #aaa solid; 
    padding: 6px; 
    padding-right: 100px; 
    border-radius: 3px; 
    -moz-box-shadow: inset 0 0 2px 0 #888; 
    -webkit-box-shadow: inset 0 0 2px 0 #888; 
    box-shadow: inset 0 0 1px 0 #888; 
} 
.blue-box { 
    background-color: #0088cc; 
} 
.red-box { 
    background-color: #ff6161; 
} 
.green-box { 
    background-color: #70c24a; 
} 
.yellow-box { 
    background-color: #e0e03e; 
} 




<table> 
    <tr> 
    <td class="color-box"> 
     <span class="blue-box"></span> #0088cc 
    </td> 
    <td class="color-box"> 
     <span class="yellow-box"></span> #e0e03e 
    </td> 
    </tr> 
    <tr> 
    <td class="color-box"> 
     <span class="green-box"></span> #70c24a 
    </td> 
    <td class="color-box"> 
     <span class="red-box"></span> #ff6161 
    </td> 
    </tr> 
</table>

Quelle

2016-07-17 22:54:45

Verwenden Sie CSS, um eine Tabelle zu erstellen, Sie können es viel einfacher stylen und es macht auch Ihre HTML Markup sauberer aussehen.

HTML:

<div class="table"> 
    <div class="table-row"> 
    <div class="table-cell"> 
     Data for cell here 
    </div> 
    </div> 
</div>

CSS:

.table { 
    display: table-cell 
    background-color: #2E21FF; 
    width: 500px; 
    height: 100px; 
    border: 1px solid #000; 
    padding:0; 
    margin:0; 
} 

.table-row { 
    display: table-row 
} 

.table-cell { 
    display: table-cell 
}

Sie können durch die Schaffung von mehr divs mit der Klassen-Tabelle-Zelle und Zeile mehr Tabellenzellen Zeilen hinzufügen innerhalb der div klassifizierten "Tabelle".

Quelle

2016-07-15 16:36:25

Verwandte Themen

innerhalb dieser