Kandungan Jadual Bootstrap Berpusat: Jadikan data lebih jelas

Petua Pusat Kandungan Bootstrap: Gunakan kelas pusat teks untuk mencapai pusat mendatar (nama kelas berpusatkan meja digunakan untuk elemen TH dan TD). Gunakan kelas D-Flex dan Align-items-center untuk menyelaraskan kandungan secara menegak dan tetapkan ketinggian div untuk memadankan ketinggian baris (untuk jadual dengan ketinggian baris tetap).

Kandungan Jadual Bootstrap Berpusat: Meningkatkan kebolehbacaan jadual

Dalam jadual bootstrap, kandungan yang berpusat adalah cara yang berkesan untuk meningkatkan kebolehbacaan dan estetika jadual. Gaya CSS membolehkan anda dengan mudah memusatkan kandungan jadual secara mendatar atau menegak.

Pusat secara mendatar

Untuk memusatkan kandungan jadual secara mendatar, gunakan kelas text-center :

 <code class="css">.table-centered { text-align: center; }</code>

Kemudian sapukan kepada unsur -unsur <th> dan <code><td> :<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> &lt;code class=&quot;html&quot;&gt;&lt;table class=&quot;table-centered&quot;&gt; &lt;tr&gt; &lt;th&gt;头1&lt;/th&gt; &lt;th&gt;头2&lt;/th&gt; ... &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;数据1&lt;/td&gt; &lt;td&gt;数据2&lt;/td&gt; ... &lt;/tr&gt; &lt;/table&gt;&lt;/code&gt;</pre><div class="contentsignin">Salin selepas log masuk</div></div> <p> <strong>Menegak berpusat</strong></p> <p> Kandungan jadual berpusat menegak memerlukan lebih banyak langkah:</p> <ul><li> Buat elemen <code><div> tambahan dan bungkusnya dalam <code><th> atau <code><td> .<li> Sapukan kelas <code>d-flex dan align-items-center ke elemen <div> ini untuk memadankan kandungannya secara menegak.<li> Tetapkan ketinggian <code><div> untuk memadankan ketinggian baris.<p> Contohnya:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> &lt;code class=&quot;html&quot;&gt;&lt;table&gt; &lt;tr&gt; &lt;th&gt; &lt;div class=&quot;d-flex align-items-center&quot; style=&quot;height: 50px;&quot;&gt;头1 &lt;/div&gt; &lt;/th&gt; ... &lt;/tr&gt; ... &lt;/table&gt;&lt;/code&gt;</pre><div class="contentsignin">Salin selepas log masuk</div></div> <p> Untuk menyesuaikan ketinggian, hanya laraskan nilai dalam <code>style="height: 50px;" .

NOTIS:

• Pusat menegak hanya sesuai untuk jadual dengan ketinggian baris tetap.
• Jika kandungan jadual mengandungi elemen (seperti butang atau imej), gunakan peraturan CSS yang sesuai untuk memusatkannya secara mendatar atau menegak.