So verwenden Sie das CSS-Attribut border-collapse, um das Tabellenrandproblem zu lösen

Beim Seitenlayout wird neben Bildern und Text auch die Tabelle am häufigsten verwendet. Für viele Menschen ist es ziemlich nervig, sie mit mehreren Ebenen zu sehen Grenzen sind extrem hässlich. Wissen Sie also, wie man den Rand der Tabelle festlegt? Heute werde ich mit Ihnen über das border-collapse-Attribut in CSS sprechen. Dieses Attribut ist sehr praktisch, aber viele Leute wissen es noch nicht.

Im Allgemeinen schreiben wir eine Tabelle, die so geschrieben ist. Geben Sie der Tabelle einen Rahmen und den gewünschten Stil. Der Code lautet wie folgt:

HTML-Teil:

<table class="aa">
   <thead>
    <tr>
     <th>序号</th>
     <th>姓名</th>
     <th>性别</th>
     <th>年龄</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td>1</td>
     <td>张晗</td>
     <td>男</td>
     <td>23</td>
    </tr>
    <tr>
     <td>2</td>
     <td>陆颖</td>
     <td>女</td>
     <td>20</td>
    </tr>
    <tr>
     <td>3</td>
     <td>郝婷婷</td>
     <td>女</td>
     <td>19</td>
    </tr>
   </tbody>
  </table>

CSS-Teil:

.aa{border: 1px solid #ccc;width:30%;text-align: center;border-collapse: collapse;}
.aa th,.aa td{border: 1px solid #ccc;padding: 10px;}

Schauen Sie, der Effekt ist so:

It Es entspricht nicht unserem Verständnis der Tabelle. Wie kommt es, dass wir im Allgemeinen nur den äußeren Rand und den gemeinsamen Teil der Zellen benötigen und nicht für jede Zelle einen Rand haben müssen? Wie kann man diese zusätzlichen Ränder entfernen? Als nächstes steht heute der Fokus. Das CSS-Attribut „border-collapse“ kann uns dabei helfen, unnötige Ränder zu entfernen.

Werfen wir zunächst einen Blick auf die Beschreibung des Attributwerts „border-collapse“. Der Standardwert ist „Separat“. Die Ränder werden getrennt und nicht zusammengeführt. Wenn sie nebeneinander liegen, fügen wir dieses Attribut der Tabelle hinzu.

.aa{border: 1px solid #ccc;width:30%;text-align: center;border-collapse: collapse;}

Bild:

Sehen Sie es? Wenn wir border-collapse: collapse auf die Tabelle anwenden, verschmelzen die Tabellenränder und werden viel schöner. Sie können dieses Attribut in zukünftigen Arbeiten verwenden, es ist sehr nützlich. Ich empfehle Freunden, es selbst auszuprobieren, insbesondere Anfängern. Ich hoffe, dieser Artikel kann Ihnen helfen!

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das CSS-Attribut border-collapse, um das Tabellenrandproblem zu lösen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!